<!doctype html><html lang="en">
 <head>
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
  <title>Resize Observer</title>
  <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
  <meta content="exploring" name="csswg-work-status">
  <meta content="ED" name="w3c-status">
  <meta content="This specification describes an API for observing changes to Element&apos;s size." name="abstract">
  <link href="../default.css" rel="stylesheet" type="text/css">
  <link href="../csslogo.ico" rel="shortcut icon" type="image/x-icon">
<style>
  body {
    background: url("https://www.w3.org/StyleSheets/TR/logo-ED") top left no-repeat;
  }
  </style>
  <link href="https://drafts.csswg.org/resize-observer/" rel="canonical">
<style>/* style-md-lists */

/* This is a weird hack for me not yet following the commonmark spec
   regarding paragraph and lists. */
[data-md] > :first-child {
    margin-top: 0;
}
[data-md] > :last-child {
    margin-bottom: 0;
}</style>
<style>/* style-selflinks */

.heading, .issue, .note, .example, li, dt {
    position: relative;
}
a.self-link {
    position: absolute;
    top: 0;
    left: calc(-1 * (3.5rem - 26px));
    width: calc(3.5rem - 26px);
    height: 2em;
    text-align: center;
    border: none;
    transition: opacity .2s;
    opacity: .5;
}
a.self-link:hover {
    opacity: 1;
}
.heading > a.self-link {
    font-size: 83%;
}
li > a.self-link {
    left: calc(-1 * (3.5rem - 26px) - 2em);
}
dfn > a.self-link {
    top: auto;
    left: auto;
    opacity: 0;
    width: 1.5em;
    height: 1.5em;
    background: gray;
    color: white;
    font-style: normal;
    transition: opacity .2s, background-color .2s, color .2s;
}
dfn:hover > a.self-link {
    opacity: 1;
}
dfn > a.self-link:hover {
    color: black;
}

a.self-link::before            { content: "¶"; }
.heading > a.self-link::before { content: "§"; }
dfn > a.self-link::before      { content: "#"; }</style>
<style>/* style-counters */

body {
    counter-reset: example figure issue;
}
.issue {
    counter-increment: issue;
}
.issue:not(.no-marker)::before {
    content: "Issue " counter(issue);
}

.example {
    counter-increment: example;
}
.example:not(.no-marker)::before {
    content: "Example " counter(example);
}
.invalid.example:not(.no-marker)::before,
.illegal.example:not(.no-marker)::before {
    content: "Invalid Example" counter(example);
}

figcaption {
    counter-increment: figure;
}
figcaption:not(.no-marker)::before {
    content: "Figure " counter(figure) " ";
}</style>
<style>/* style-autolinks */

.css.css, .property.property, .descriptor.descriptor {
    color: #005a9c;
    font-size: inherit;
    font-family: inherit;
}
.css::before, .property::before, .descriptor::before {
    content: "‘";
}
.css::after, .property::after, .descriptor::after {
    content: "’";
}
.property, .descriptor {
    /* Don't wrap property and descriptor names */
    white-space: nowrap;
}
.type { /* CSS value <type> */
    font-style: italic;
}
pre .property::before, pre .property::after {
    content: "";
}
[data-link-type="property"]::before,
[data-link-type="propdesc"]::before,
[data-link-type="descriptor"]::before,
[data-link-type="value"]::before,
[data-link-type="function"]::before,
[data-link-type="at-rule"]::before,
[data-link-type="selector"]::before,
[data-link-type="maybe"]::before {
    content: "‘";
}
[data-link-type="property"]::after,
[data-link-type="propdesc"]::after,
[data-link-type="descriptor"]::after,
[data-link-type="value"]::after,
[data-link-type="function"]::after,
[data-link-type="at-rule"]::after,
[data-link-type="selector"]::after,
[data-link-type="maybe"]::after {
    content: "’";
}

[data-link-type].production::before,
[data-link-type].production::after,
.prod [data-link-type]::before,
.prod [data-link-type]::after {
    content: "";
}

[data-link-type=element],
[data-link-type=element-attr] {
    font-family: Menlo, Consolas, "DejaVu Sans Mono", monospace;
    font-size: .9em;
}
[data-link-type=element]::before { content: "<" }
[data-link-type=element]::after  { content: ">" }

[data-link-type=biblio] {
    white-space: pre;
}</style>
<style>/* style-dfn-panel */

.dfn-panel {
    position: absolute;
    z-index: 35;
    height: auto;
    width: -webkit-fit-content;
    width: fit-content;
    max-width: 300px;
    max-height: 500px;
    overflow: auto;
    padding: 0.5em 0.75em;
    font: small Helvetica Neue, sans-serif, Droid Sans Fallback;
    background: #DDDDDD;
    color: black;
    border: outset 0.2em;
}
.dfn-panel:not(.on) { display: none; }
.dfn-panel * { margin: 0; padding: 0; text-indent: 0; }
.dfn-panel > b { display: block; }
.dfn-panel a { color: black; }
.dfn-panel a:not(:hover) { text-decoration: none !important; border-bottom: none !important; }
.dfn-panel > b + b { margin-top: 0.25em; }
.dfn-panel ul { padding: 0; }
.dfn-panel li { list-style: inside; }
.dfn-panel.activated {
    display: inline-block;
    position: fixed;
    left: .5em;
    bottom: 2em;
    margin: 0 auto;
    max-width: calc(100vw - 1.5em - .4em - .5em);
    max-height: 30vh;
}

.dfn-paneled { cursor: pointer; }
</style>
<style>/* style-syntax-highlighting */
pre.idl.highlight { color: #708090; }
.highlight:not(.idl) { background: hsl(24, 20%, 95%); }
code.highlight { padding: .1em; border-radius: .3em; }
pre.highlight, pre > code.highlight { display: block; padding: 1em; margin: .5em 0; overflow: auto; border-radius: 0; }
c-[a] { color: #990055 } /* Keyword.Declaration */
c-[b] { color: #990055 } /* Keyword.Type */
c-[c] { color: #708090 } /* Comment */
c-[d] { color: #708090 } /* Comment.Multiline */
c-[e] { color: #0077aa } /* Name.Attribute */
c-[f] { color: #669900 } /* Name.Tag */
c-[g] { color: #222222 } /* Name.Variable */
c-[k] { color: #990055 } /* Keyword */
c-[l] { color: #000000 } /* Literal */
c-[m] { color: #000000 } /* Literal.Number */
c-[n] { color: #0077aa } /* Name */
c-[o] { color: #999999 } /* Operator */
c-[p] { color: #999999 } /* Punctuation */
c-[s] { color: #a67f59 } /* Literal.String */
c-[t] { color: #a67f59 } /* Literal.String.Single */
c-[u] { color: #a67f59 } /* Literal.String.Double */
c-[cp] { color: #708090 } /* Comment.Preproc */
c-[c1] { color: #708090 } /* Comment.Single */
c-[cs] { color: #708090 } /* Comment.Special */
c-[kc] { color: #990055 } /* Keyword.Constant */
c-[kn] { color: #990055 } /* Keyword.Namespace */
c-[kp] { color: #990055 } /* Keyword.Pseudo */
c-[kr] { color: #990055 } /* Keyword.Reserved */
c-[ld] { color: #000000 } /* Literal.Date */
c-[nc] { color: #0077aa } /* Name.Class */
c-[no] { color: #0077aa } /* Name.Constant */
c-[nd] { color: #0077aa } /* Name.Decorator */
c-[ni] { color: #0077aa } /* Name.Entity */
c-[ne] { color: #0077aa } /* Name.Exception */
c-[nf] { color: #0077aa } /* Name.Function */
c-[nl] { color: #0077aa } /* Name.Label */
c-[nn] { color: #0077aa } /* Name.Namespace */
c-[py] { color: #0077aa } /* Name.Property */
c-[ow] { color: #999999 } /* Operator.Word */
c-[mb] { color: #000000 } /* Literal.Number.Bin */
c-[mf] { color: #000000 } /* Literal.Number.Float */
c-[mh] { color: #000000 } /* Literal.Number.Hex */
c-[mi] { color: #000000 } /* Literal.Number.Integer */
c-[mo] { color: #000000 } /* Literal.Number.Oct */
c-[sb] { color: #a67f59 } /* Literal.String.Backtick */
c-[sc] { color: #a67f59 } /* Literal.String.Char */
c-[sd] { color: #a67f59 } /* Literal.String.Doc */
c-[se] { color: #a67f59 } /* Literal.String.Escape */
c-[sh] { color: #a67f59 } /* Literal.String.Heredoc */
c-[si] { color: #a67f59 } /* Literal.String.Interpol */
c-[sx] { color: #a67f59 } /* Literal.String.Other */
c-[sr] { color: #a67f59 } /* Literal.String.Regex */
c-[ss] { color: #a67f59 } /* Literal.String.Symbol */
c-[vc] { color: #0077aa } /* Name.Variable.Class */
c-[vg] { color: #0077aa } /* Name.Variable.Global */
c-[vi] { color: #0077aa } /* Name.Variable.Instance */
c-[il] { color: #000000 } /* Literal.Number.Integer.Long */
</style>
 <body class="h-entry">
  <div class="head">
   <p data-fill-with="logo"><a class="logo" href="https://www.w3.org/"> <img alt="W3C" height="48" src="https://www.w3.org/StyleSheets/TR/2016/logos/W3C" width="72"> </a> </p>
   <h1 class="p-name no-ref" id="title">Resize Observer</h1>
   <h2 class="no-num no-toc no-ref heading settled" id="subtitle"><span class="content">Editor’s Draft, <time class="dt-updated" datetime="1970-01-01">1 January 1970</time></span></h2>
   <details>
    <summary>Specification Metadata</summary>
    <div data-fill-with="spec-metadata">
     <dl>
      <dt>This version:
      <dd><a class="u-url" href="https://drafts.csswg.org/resize-observer/">https://drafts.csswg.org/resize-observer/</a>
      <dt class="editor">Editors:
      <dd class="editor p-author h-card vcard" data-editor-id="92454"><a class="p-name fn u-email email" href="mailto:atotic@google.com">Aleks Totic</a> (<span class="p-org org">Google</span>)
      <dd class="editor p-author h-card vcard" data-editor-id="69511"><a class="p-name fn u-email email" href="mailto:gwhit@microsoft.com">Greg Whitworth</a> (<span class="p-org org">Microsoft</span>)
      <dt>Suggest an Edit for this Spec:
      <dd><a href="https://github.com/w3c/csswg-drafts/blob/master/resize-observer-1/Overview.bs">GitHub Editor</a>
      <dt>Issue Tracking:
      <dd><a href="https://github.com/w3c/csswg-drafts/labels/resize-observer-1">GitHub Issues</a>
     </dl>
    </div>
   </details>
   <div data-fill-with="warning"></div>
   <p class="copyright" data-fill-with="copyright"><a href="https://www.w3.org/Consortium/Legal/ipr-notice#Copyright">Copyright</a> © 1970 <a href="https://www.w3.org/"><abbr title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a href="https://www.csail.mit.edu/"><abbr title="Massachusetts Institute of Technology">MIT</abbr></a>, <a href="https://www.ercim.eu/"><abbr title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>, <a href="https://www.keio.ac.jp/">Keio</a>, <a href="https://ev.buaa.edu.cn/">Beihang</a>). W3C <a href="https://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>, <a href="https://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a> and <a href="https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document">permissive document license</a> rules apply. </p>
   <hr title="Separator for header">
  </div>
  <div class="p-summary" data-fill-with="abstract">
   <h2 class="no-num no-toc no-ref heading settled" id="abstract"><span class="content">Abstract</span></h2>
   <p>This specification describes an API for observing changes to Element’s size.</p>
    <a href="https://www.w3.org/TR/CSS/">CSS</a> is a language for describing the rendering of structured documents
(such as HTML and XML)
on screen, on paper, etc. 
  </div>
  <h2 class="no-num no-toc no-ref heading settled" id="status"><span class="content">Status of this document</span></h2>
  <div data-fill-with="status">
   <p> This is a public copy of the editors’ draft.
	It is provided for discussion only and may change at any moment.
	Its publication here does not imply endorsement of its contents by W3C.
	Don’t cite this document other than as work in progress. </p>
   <p> <a href="https://github.com/w3c/csswg-drafts/issues">GitHub Issues</a> are preferred for discussion of this specification.
	When filing an issue, please put the text “resize-observer” in the title,
	preferably like this:
	“[resize-observer] <i data-lt>…summary of comment…</i>”.
	All issues and comments are <a href="https://lists.w3.org/Archives/Public/public-css-archive/">archived</a>,
	and there is also a <a href="https://lists.w3.org/Archives/Public/www-style/">historical archive</a>. </p>
   <p> This document was produced by the <a href="https://www.w3.org/Style/CSS/">CSS Working Group</a>. </p>
   <p> This document was produced by a group operating under
	the <a href="https://www.w3.org/Consortium/Patent-Policy/">W3C Patent Policy</a>.
	W3C maintains a <a href="https://www.w3.org/2004/01/pp-impl/32061/status" rel="disclosure">public list of any patent disclosures</a> made in connection with the deliverables of the group;
	that page also includes instructions for disclosing a patent.
	An individual who has actual knowledge of a patent which the individual believes contains <a href="https://www.w3.org/Consortium/Patent-Policy/#def-essential">Essential Claim(s)</a> must disclose the information in accordance with <a href="https://www.w3.org/Consortium/Patent-Policy/#sec-Disclosure">section 6 of the W3C Patent Policy</a>. </p>
   <p> This document is governed by the <a href="https://www.w3.org/2019/Process-20190301/" id="w3c_process_revision">1 March 2019 W3C Process Document</a>. </p>
   <p></p>
  </div>
  <div data-fill-with="at-risk"></div>
  <nav data-fill-with="table-of-contents" id="toc">
   <h2 class="no-num no-toc no-ref" id="contents">Table of Contents</h2>
   <ol class="toc" role="directory">
    <li><a href="#intro"><span class="secno">1</span> <span class="content">Introduction</span></a>
    <li>
     <a href="#api"><span class="secno">2</span> <span class="content">Resize Observer API</span></a>
     <ol class="toc">
      <li><a href="#resize-observer-interface"><span class="secno">2.1</span> <span class="content">ResizeObserver interface</span></a>
      <li><a href="#resize-observer-callback"><span class="secno">2.2</span> <span class="content">ResizeObserverCallback</span></a>
      <li><a href="#resize-observer-entry-interface"><span class="secno">2.3</span> <span class="content">ResizeObserverEntry</span></a>
     </ol>
    <li>
     <a href="#processing-model"><span class="secno">3</span> <span class="content">Processing Model</span></a>
     <ol class="toc">
      <li><a href="#resize-observation-interface"><span class="secno">3.1</span> <span class="content">ResizeObservation example struct</span></a>
      <li>
       <a href="#internal-slot-definitions"><span class="secno">3.2</span> <span class="content">Internal Slot Definitions</span></a>
       <ol class="toc">
        <li><a href="#document-slots"><span class="secno">3.2.1</span> <span class="content">Document</span></a>
        <li><a href="#resize-observer-slots"><span class="secno">3.2.2</span> <span class="content">ResizeObserver</span></a>
       </ol>
      <li>
       <a href="#css-definitions"><span class="secno">3.3</span> <span class="content">CSS Definitions</span></a>
       <ol class="toc">
        <li><a href="#content-rect-h"><span class="secno">3.3.1</span> <span class="content">content rect</span></a>
       </ol>
      <li>
       <a href="#algorithms"><span class="secno">3.4</span> <span class="content">Algorithms</span></a>
       <ol class="toc">
        <li><a href="#gather-active-observations-h"><span class="secno">3.4.1</span> <span class="content">Gather active observations at depth</span></a>
        <li><a href="#has-active-observations-h"><span class="secno">3.4.2</span> <span class="content">Has active observations</span></a>
        <li><a href="#has-skipped-observations-h"><span class="secno">3.4.3</span> <span class="content">Has skipped observations</span></a>
        <li><a href="#create-and-populate-resizeobserverentry-h"><span class="secno">3.4.4</span> <span class="content"> Create and populate a ResizeObserverEntry </span></a>
        <li><a href="#broadcast-resize-notifications-h"><span class="secno">3.4.5</span> <span class="content">Broadcast active observations</span></a>
        <li><a href="#deliver-resize-error"><span class="secno">3.4.6</span> <span class="content">Deliver Resize Loop Error</span></a>
        <li><a href="#calculate-depth-for-node-h"><span class="secno">3.4.7</span> <span class="content">Calculate depth for node</span></a>
        <li><a href="#calculate-box-size"><span class="secno">3.4.8</span> <span class="content">Calculate box size, given target and observed box</span></a>
       </ol>
      <li><a href="#lifetime"><span class="secno">3.5</span> <span class="content">ResizeObserver Lifetime</span></a>
      <li>
       <a href="#integrations"><span class="secno">3.6</span> <span class="content">External Spec Integrations</span></a>
       <ol class="toc">
        <li><a href="#html-event-loop"><span class="secno">3.6.1</span> <span class="content"> HTML Processing Model: Event Loop</span></a>
       </ol>
     </ol>
    <li>
     <a href="#conformance"><span class="secno"></span> <span class="content"> Conformance</span></a>
     <ol class="toc">
      <li><a href="#document-conventions"><span class="secno"></span> <span class="content"> Document conventions</span></a>
      <li><a href="#conform-classes"><span class="secno"></span> <span class="content"> Conformance classes</span></a>
      <li>
       <a href="#conform-responsible"><span class="secno"></span> <span class="content"> Requirements for Responsible Implementation of CSS</span></a>
       <ol class="toc">
        <li><a href="#conform-partial"><span class="secno"></span> <span class="content"> Partial Implementations</span></a>
        <li><a href="#conform-future-proofing"><span class="secno"></span> <span class="content"> Implementations of Unstable and Proprietary Features</span></a>
        <li><a href="#conform-testing"><span class="secno"></span> <span class="content"> Implementations of CR-level Features</span></a>
       </ol>
     </ol>
    <li>
     <a href="#index"><span class="secno"></span> <span class="content">Index</span></a>
     <ol class="toc">
      <li><a href="#index-defined-here"><span class="secno"></span> <span class="content">Terms defined by this specification</span></a>
      <li><a href="#index-defined-elsewhere"><span class="secno"></span> <span class="content">Terms defined by reference</span></a>
     </ol>
    <li>
     <a href="#references"><span class="secno"></span> <span class="content">References</span></a>
     <ol class="toc">
      <li><a href="#normative"><span class="secno"></span> <span class="content">Normative References</span></a>
     </ol>
    <li><a href="#idl-index"><span class="secno"></span> <span class="content">IDL Index</span></a>
   </ol>
  </nav>
  <main>
   <h2 class="heading settled" data-level="1" id="intro"><span class="secno">1. </span><span class="content">Introduction</span><a class="self-link" href="#intro"></a></h2>
   <p><em>This section is non-normative.</em></p>
   <p>Responsive Web Components need to respond to <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#element" id="ref-for-element">Element</a></code>'s
size changes. An example is an <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#element" id="ref-for-element①">Element</a></code> that displays a map:</p>
   <ul>
    <li data-md>
     <p>it displays a map by tiling its content box with <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#element" id="ref-for-element②">Element</a></code> tiles.</p>
    <li data-md>
     <p>when resized, it must redo the tiling.</p>
   </ul>
   <p>Responsive Web Applications can already respond to <a data-link-type="dfn" href="https://www.w3.org/TR/css3-positioning/#viewport" id="ref-for-viewport">viewport</a> size changes.
This is done with CSS media queries, or window.<code class="idl"><a data-link-type="idl" href="https://drafts.csswg.org/cssom-view-1/#eventdef-window-resize" id="ref-for-eventdef-window-resize">resize</a></code> event.</p>
   <p>The ResizeObserver API is an interface for observing changes
to Element’s size. It is an <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#element" id="ref-for-element③">Element</a></code>'s
counterpart to window.<code class="idl"><a data-link-type="idl" href="https://drafts.csswg.org/cssom-view-1/#eventdef-window-resize" id="ref-for-eventdef-window-resize①">resize</a></code> event.</p>
   <p>ResizeObserver’s notifications can be used to respond to changes in <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#element" id="ref-for-element④">Element</a></code>'s size. Some interesting facts about these observations:</p>
   <ul>
    <li data-md>
     <p>Observation will fire when watched Element is inserted/removed from DOM.</p>
    <li data-md>
     <p>Observation will fire when watched Element <a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#propdef-display" id="ref-for-propdef-display">display</a> gets set to none.</p>
    <li data-md>
     <p>Observations do not fire for non-replaced inline Elements.</p>
    <li data-md>
     <p>Observations will not be triggered by CSS transforms.</p>
    <li data-md>
     <p>Observation will fire when observation starts if Element is <a href="https://html.spec.whatwg.org/#being-rendered">being rendered</a>, and Element’s size is not 0,0.</p>
   </ul>
   <div class="example" id="example-ecce5bcd">
    <a class="self-link" href="#example-ecce5bcd"></a> 
<pre class="highlight"><c- p>&lt;</c-><c- f>canvas</c-> <c- e>id</c-><c- o>=</c-><c- s>"elipse"</c-> <c- e>style</c-><c- o>=</c-><c- s>"display:block"</c-><c- p>>&lt;/</c-><c- f>canvas</c-><c- p>></c->
<c- p>&lt;</c-><c- f>div</c-> <c- e>id</c-><c- o>=</c-><c- s>"menu"</c-> <c- e>style</c-><c- o>=</c-><c- s>"display:block;width:100px"</c-><c- p>></c->
    <c- p>&lt;</c-><c- f>img</c-> <c- e>src</c-><c- o>=</c-><c- s>"hamburger.jpg"</c-> <c- e>style</c-><c- o>=</c-><c- s>"width:24px;height:24px"</c-><c- p>></c->
    <c- p>&lt;</c-><c- f>p</c-> <c- e>class</c-><c- o>=</c-><c- s>"title"</c-><c- p>></c->menu title<c- p>&lt;/</c-><c- f>p</c-><c- p>></c->
<c- p>&lt;/</c-><c- f>div</c-><c- p>></c->
</pre>
<pre class="highlight"><c- c1>// In response to resize, elipse paints an elipse inside a canvas</c->
document<c- p>.</c->querySelector<c- p>(</c-><c- t>'#elipse'</c-><c- p>).</c->handleResize <c- o>=</c-> entry <c- p>=></c-> <c- p>{</c->
    entry<c- p>.</c->target<c- p>.</c->width <c- o>=</c-> entry<c- p>.</c->borderBoxSize<c- p>[</c-><c- mi>0</c-><c- p>].</c->inlineSize<c- p>;</c->
    entry<c- p>.</c->target<c- p>.</c->height <c- o>=</c-> entry<c- p>.</c->borderBoxSize<c- p>[</c-><c- mi>0</c-><c- p>].</c->blockSize<c- p>;</c->
    <c- a>let</c-> rx <c- o>=</c-> Math<c- p>.</c->floor<c- p>(</c->entry<c- p>.</c->target<c- p>.</c->width <c- o>/</c-> <c- mi>2</c-><c- p>);</c->
    <c- a>let</c-> ry <c- o>=</c-> Math<c- p>.</c->floor<c- p>(</c->entry<c- p>.</c->target<c- p>.</c->height <c- o>/</c-> <c- mi>2</c-><c- p>);</c->
    <c- a>let</c-> ctx <c- o>=</c-> entry<c- p>.</c->target<c- p>.</c->getContext<c- p>(</c-><c- t>'2d'</c-><c- p>);</c->
    ctx<c- p>.</c->beginPath<c- p>();</c->
    ctx<c- p>.</c->ellipse<c- p>(</c->rx<c- p>,</c-> ry<c- p>,</c-> rx<c- p>,</c-> ry<c- p>,</c-> <c- mi>0</c-><c- p>,</c-> <c- mi>0</c-><c- p>,</c-> <c- mi>2</c-> <c- o>*</c-> Math<c- p>.</c->PI<c- p>);</c->
    ctx<c- p>.</c->stroke<c- p>();</c->
<c- p>}</c->
<c- c1>// In response to resize, change title visibility depending on width</c->
document<c- p>.</c->querySelector<c- p>(</c-><c- t>'#menu'</c-><c- p>).</c->handleResize <c- o>=</c-> entry <c- p>=></c-> <c- p>{</c->
    <c- a>let</c-> title <c- o>=</c-> entry<c- p>.</c->target<c- p>.</c->querySelector<c- p>(</c-><c- u>".title"</c-><c- p>)</c->
    <c- k>if</c-> <c- p>(</c->entry<c- p>.</c->borderBoxSize<c- p>[</c-><c- mi>0</c-><c- p>].</c->inlineSize <c- o>&lt;</c-> <c- mi>40</c-><c- p>)</c->
        title<c- p>.</c->style<c- p>.</c->display <c- o>=</c-> <c- u>"none"</c-><c- p>;</c->
    <c- k>else</c->
        title<c- p>.</c->style<c- p>.</c->display <c- o>=</c-> <c- u>"inline-block"</c-><c- p>;</c->
<c- p>}</c->

<c- a>var</c-> ro <c- o>=</c-> <c- k>new</c-> ResizeObserver<c- p>(</c-> entries <c- p>=></c-> <c- p>{</c->
  <c- k>for</c-> <c- p>(</c-><c- a>let</c-> entry <c- k>of</c-> entries<c- p>)</c-> <c- p>{</c->
    <c- a>let</c-> cs <c- o>=</c-> window<c- p>.</c->getComputedStyle<c- p>(</c->entry<c- p>.</c->target<c- p>);</c->
    console<c- p>.</c->log<c- p>(</c-><c- t>'watching element:'</c-><c- p>,</c-> entry<c- p>.</c->target<c- p>);</c->
    console<c- p>.</c->log<c- p>(</c->entry<c- p>.</c->contentRect<c- p>.</c->top<c- p>,</c-><c- t>' is '</c-><c- p>,</c-> cs<c- p>.</c->paddingTop<c- p>);</c->
    console<c- p>.</c->log<c- p>(</c->entry<c- p>.</c->contentRect<c- p>.</c->left<c- p>,</c-><c- t>' is '</c-><c- p>,</c-> cs<c- p>.</c->paddingLeft<c- p>);</c->
    console<c- p>.</c->log<c- p>(</c->entry<c- p>.</c->borderBoxSize<c- p>[</c-><c- mi>0</c-><c- p>].</c->inlineSize<c- p>,</c-><c- t>' is '</c-><c- p>,</c-> cs<c- p>.</c->width<c- p>);</c->
    console<c- p>.</c->log<c- p>(</c->entry<c- p>.</c->borderBoxSize<c- p>[</c-><c- mi>0</c-><c- p>].</c->blockSize<c- p>,</c-><c- t>' is '</c-><c- p>,</c-> cs<c- p>.</c->height<c- p>);</c->
    <c- k>if</c-> <c- p>(</c->entry<c- p>.</c->target<c- p>.</c->handleResize<c- p>)</c->
        entry<c- p>.</c->target<c- p>.</c->handleResize<c- p>(</c->entry<c- p>);</c->
  <c- p>}</c->
<c- p>});</c->
ro<c- p>.</c->observe<c- p>(</c->document<c- p>.</c->querySelector<c- p>(</c-><c- t>'#elipse'</c-><c- p>));</c->
ro<c- p>.</c->observe<c- p>(</c->document<c- p>.</c->querySelector<c- p>(</c-><c- t>'#menu'</c-><c- p>));</c->
</pre>
   </div>
   <h2 class="heading settled" data-level="2" id="api"><span class="secno">2. </span><span class="content">Resize Observer API</span><a class="self-link" href="#api"></a></h2>
   <h3 class="heading settled" data-level="2.1" id="resize-observer-interface"><span class="secno">2.1. </span><span class="content">ResizeObserver interface</span><a class="self-link" href="#resize-observer-interface"></a></h3>
   <p>The ResizeObserver interface is used to observe changes to <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#element" id="ref-for-element⑤">Element</a></code>'s
size.</p>
   <p>It is modeled after <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#mutationobserver" id="ref-for-mutationobserver">MutationObserver</a></code> and <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/intersection-observer/#intersection-observer-interface" id="ref-for-intersection-observer-interface">IntersectionObserver</a></code>.</p>
<pre class="idl highlight def"><c- b>enum</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="enum" data-export id="enumdef-resizeobserverboxoptions"><code><c- g>ResizeObserverBoxOptions</c-></code></dfn> {
    <dfn class="dfn-paneled idl-code" data-dfn-for="ResizeObserverBoxOptions" data-dfn-type="enum-value" data-export id="dom-resizeobserverboxoptions-border-box"><code><c- s>"border-box"</c-></code></dfn>, <dfn class="dfn-paneled idl-code" data-dfn-for="ResizeObserverBoxOptions" data-dfn-type="enum-value" data-export id="dom-resizeobserverboxoptions-content-box"><code><c- s>"content-box"</c-></code></dfn>, <dfn class="dfn-paneled idl-code" data-dfn-for="ResizeObserverBoxOptions" data-dfn-type="enum-value" data-export id="dom-resizeobserverboxoptions-device-pixel-content-box"><code><c- s>"device-pixel-content-box"</c-></code></dfn>
};
</pre>
   <p>ResizeObserver can observe different kinds of CSS sizes:</p>
   <ul>
    <li data-md>
     <p><code class="idl"><a data-link-type="idl" href="#dom-resizeobserverboxoptions-border-box" id="ref-for-dom-resizeobserverboxoptions-border-box">border-box</a></code> : size of <a data-link-type="dfn" href="https://www.w3.org/TR/CSS21/box.html#box-border-area" id="ref-for-box-border-area">box border area</a> as defined in CSS2.</p>
    <li data-md>
     <p><code class="idl"><a data-link-type="idl" href="#dom-resizeobserverboxoptions-content-box" id="ref-for-dom-resizeobserverboxoptions-content-box">content-box</a></code> : size of <a data-link-type="dfn" href="https://drafts.csswg.org/css-box-3/#content-area" id="ref-for-content-area">content area</a> as defined in CSS2.</p>
    <li data-md>
     <p><code class="idl"><a data-link-type="idl" href="#dom-resizeobserverboxoptions-device-pixel-content-box" id="ref-for-dom-resizeobserverboxoptions-device-pixel-content-box">device-pixel-content-box</a></code> : size of <a data-link-type="dfn" href="https://drafts.csswg.org/css-box-3/#content-area" id="ref-for-content-area①">content area</a> as defined in CSS2, in device pixels,
before applying any CSS transforms on the element or its ancestors.
This size must contain integer values.</p>
   </ul>
   <p class="note" role="note"> The <code class="idl"><a data-link-type="idl" href="#dom-resizeobserverboxoptions-device-pixel-content-box" id="ref-for-dom-resizeobserverboxoptions-device-pixel-content-box①">device-pixel-content-box</a></code> can be approximated by multiplying <a data-link-type="dfn" href="https://www.w3.org/TR/cssom-view-1/#dom-window-devicepixelratio" id="ref-for-dom-window-devicepixelratio">devicePixelRatio</a> by the <code class="idl"><a data-link-type="idl" href="#dom-resizeobserverboxoptions-content-box" id="ref-for-dom-resizeobserverboxoptions-content-box①">content-box</a></code> size.
However, due to browser-specific subpixel snapping behavior,
authors cannot determine the correct way to round this scaled <code class="idl"><a data-link-type="idl" href="#dom-resizeobserverboxoptions-content-box" id="ref-for-dom-resizeobserverboxoptions-content-box②">content-box</a></code> size.
How a UA computes the device pixel box for an element is implementation-dependent.
One possible implementation could be to multiply the box size and position by the device pixel ratio,
then round both the resulting floating-point size and position of the box to integer values,
in a way that maximizes the quality of the rendered output. </p>
   <p>Note that this size can be affected by position changes to the target,
and thus is typically more expensive to observe than the other sizes.</p>
   <p></p>
<pre class="idl highlight def"><c- b>dictionary</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="dictionary" data-export id="dictdef-resizeobserveroptions"><code><c- g>ResizeObserverOptions</c-></code></dfn> {
    <a class="n" data-link-type="idl-name" href="#enumdef-resizeobserverboxoptions" id="ref-for-enumdef-resizeobserverboxoptions"><c- n>ResizeObserverBoxOptions</c-></a> <dfn class="idl-code" data-default="&quot;content-box&quot;" data-dfn-for="ResizeObserverOptions" data-dfn-type="dict-member" data-export data-type="ResizeObserverBoxOptions " id="dom-resizeobserveroptions-box"><code><c- g>box</c-></code><a class="self-link" href="#dom-resizeobserveroptions-box"></a></dfn> = "content-box";
};
</pre>
   <p>This section is non-normative. An author may desire to observe more than one CSS box.
In this case, author will need to use multiple ResizeObservers.</p>
<pre class="highlight"><c- c1>// Observe the content-box</c->
ro<c- p>.</c->observe<c- p>(</c->document<c- p>.</c->querySelector<c- p>(</c-><c- t>'#menu'</c-><c- p>),</c-> <c- p>{</c-> box<c- o>:</c-> <c- t>'content-box'</c-> <c- p>});</c->

<c- c1>// Observe just the border box. Replaces previous observation.</c->
ro1<c- p>.</c->observe<c- p>(</c->document<c- p>.</c->querySelector<c- p>(</c-><c- t>'#menu'</c-><c- p>),</c-> <c- p>{</c-> box<c- o>:</c-> <c- t>'border-box'</c-> <c- p>});</c->
</pre>
   <p class="note" role="note">This does not have any impact on which box dimensions are returned to the defined callback when the event is fired,
                it solely defines which box the author wishes to observe layout changes on.</p>
<pre class="idl highlight def">[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed"><c- g>Exposed</c-></a>=(<c- n>Window</c->),
 <a class="idl-code" data-link-type="constructor" href="#dom-resizeobserver-resizeobserver" id="ref-for-dom-resizeobserver-resizeobserver"><c- g>Constructor</c-></a>(<a class="n" data-link-type="idl-name" href="#callbackdef-resizeobservercallback" id="ref-for-callbackdef-resizeobservercallback"><c- n>ResizeObserverCallback</c-></a> <dfn class="idl-code" data-dfn-for="ResizeObserver/ResizeObserver(callback)" data-dfn-type="argument" data-export id="dom-resizeobserver-resizeobserver-callback-callback"><code><c- g>callback</c-></code><a class="self-link" href="#dom-resizeobserver-resizeobserver-callback-callback"></a></dfn>)]
<c- b>interface</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="interface" data-export id="resizeobserver"><code><c- g>ResizeObserver</c-></code></dfn> {
    <c- b>void</c-> <a class="idl-code" data-link-type="method" href="#dom-resizeobserver-observe" id="ref-for-dom-resizeobserver-observe"><c- g>observe</c-></a>(<a class="n" data-link-type="idl-name" href="https://dom.spec.whatwg.org/#element" id="ref-for-element⑥"><c- n>Element</c-></a> <dfn class="idl-code" data-dfn-for="ResizeObserver/observe(target, options), ResizeObserver/observe(target)" data-dfn-type="argument" data-export id="dom-resizeobserver-observe-target-options-target"><code><c- g>target</c-></code><a class="self-link" href="#dom-resizeobserver-observe-target-options-target"></a></dfn>, <c- b>optional</c-> <a class="n" data-link-type="idl-name" href="#dictdef-resizeobserveroptions" id="ref-for-dictdef-resizeobserveroptions"><c- n>ResizeObserverOptions</c-></a> <dfn class="idl-code" data-dfn-for="ResizeObserver/observe(target, options), ResizeObserver/observe(target)" data-dfn-type="argument" data-export id="dom-resizeobserver-observe-target-options-options"><code><c- g>options</c-></code><a class="self-link" href="#dom-resizeobserver-observe-target-options-options"></a></dfn>);
    <c- b>void</c-> <a class="idl-code" data-link-type="method" href="#dom-resizeobserver-unobserve" id="ref-for-dom-resizeobserver-unobserve"><c- g>unobserve</c-></a>(<a class="n" data-link-type="idl-name" href="https://dom.spec.whatwg.org/#element" id="ref-for-element⑦"><c- n>Element</c-></a> <dfn class="idl-code" data-dfn-for="ResizeObserver/unobserve(target)" data-dfn-type="argument" data-export id="dom-resizeobserver-unobserve-target-target"><code><c- g>target</c-></code><a class="self-link" href="#dom-resizeobserver-unobserve-target-target"></a></dfn>);
    <c- b>void</c-> <a class="idl-code" data-link-type="method" href="#dom-resizeobserver-disconnect" id="ref-for-dom-resizeobserver-disconnect"><c- g>disconnect</c-></a>();
};
</pre>
   <div>
    <dl>
     <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="ResizeObserver" data-dfn-type="constructor" data-export data-lt="ResizeObserver(callback)" id="dom-resizeobserver-resizeobserver"><code>new ResizeObserver(callback)</code></dfn>
     <dd data-md>
      <ol>
       <li data-md>
        <p>Let <var>this</var> be a new <code class="idl"><a data-link-type="idl" href="#resizeobserver" id="ref-for-resizeobserver">ResizeObserver</a></code> object.</p>
       <li data-md>
        <p>Set <var>this</var>.<var>callback</var> internal slot to callback.</p>
       <li data-md>
        <p>Set <var>this</var>.<var>observationTargets</var> internal slot to an empty list.</p>
       <li data-md>
        <p>Add <var>this</var> to <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#document" id="ref-for-document">Document</a></code>.<var>resizeObservers</var> slot.</p>
      </ol>
     <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="ResizeObserver" data-dfn-type="method" data-export data-lt="observe(target, options)|observe(target)" id="dom-resizeobserver-observe"><code>observe(target, options)</code></dfn>
     <dd data-md>
      <p>Adds target to the list of observed elements.</p>
      <ol>
       <li data-md>
        <p>If <var>target</var> is in <code class="idl"><a data-link-type="idl" href="#dom-resizeobserver-observationtargets" id="ref-for-dom-resizeobserver-observationtargets">observationTargets</a></code> slot, call unobserve(<var>target</var>).</p>
       <li data-md>
        <p>Let <var>resizeObservation</var> be new <code class="idl"><a data-link-type="idl" href="#resizeobservation" id="ref-for-resizeobservation">ResizeObservation</a></code>(<var>target</var>, <var>options</var>).</p>
       <li data-md>
        <p>Add the <var>resizeObservation</var> to the <var>observationTargets</var> slot.</p>
      </ol>
     <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="ResizeObserver" data-dfn-type="method" data-export id="dom-resizeobserver-unobserve"><code>unobserve(target)</code></dfn>
     <dd data-md>
      <p>Removes <var>target</var> from the list of observed elements.</p>
      <ol>
       <li data-md>
        <p>Let <var>observation</var> be <code class="idl"><a data-link-type="idl" href="#resizeobservation" id="ref-for-resizeobservation①">ResizeObservation</a></code> in <code class="idl"><a data-link-type="idl" href="#dom-resizeobserver-observationtargets" id="ref-for-dom-resizeobserver-observationtargets①">observationTargets</a></code> whose target slot is <var>target</var>.</p>
       <li data-md>
        <p>If <var>observation</var> is not found, return.</p>
       <li data-md>
        <p>Remove <var>observation</var> from <code class="idl"><a data-link-type="idl" href="#dom-resizeobserver-observationtargets" id="ref-for-dom-resizeobserver-observationtargets②">observationTargets</a></code>.</p>
      </ol>
     <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="ResizeObserver" data-dfn-type="method" data-export id="dom-resizeobserver-disconnect"><code>disconnect()</code></dfn>
     <dd data-md>
      <ol>
       <li data-md>
        <p>Clear the <code class="idl"><a data-link-type="idl" href="#dom-resizeobserver-observationtargets" id="ref-for-dom-resizeobserver-observationtargets③">observationTargets</a></code> list.</p>
       <li data-md>
        <p>Clear the <code class="idl"><a data-link-type="idl" href="#dom-resizeobserver-activetargets" id="ref-for-dom-resizeobserver-activetargets">activeTargets</a></code> list.</p>
      </ol>
    </dl>
   </div>
   <h3 class="heading settled" data-level="2.2" id="resize-observer-callback"><span class="secno">2.2. </span><span class="content">ResizeObserverCallback</span><a class="self-link" href="#resize-observer-callback"></a></h3>
<pre class="idl highlight def"><c- b>callback</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="callback" data-export id="callbackdef-resizeobservercallback"><code><c- g>ResizeObserverCallback</c-></code></dfn> = <c- b>void</c-> (<c- b>sequence</c->&lt;<a class="n" data-link-type="idl-name" href="#resizeobserverentry" id="ref-for-resizeobserverentry"><c- n>ResizeObserverEntry</c-></a>> <dfn class="idl-code" data-dfn-for="ResizeObserverCallback" data-dfn-type="argument" data-export id="dom-resizeobservercallback-entries"><code><c- g>entries</c-></code><a class="self-link" href="#dom-resizeobservercallback-entries"></a></dfn>, <a class="n" data-link-type="idl-name" href="#resizeobserver" id="ref-for-resizeobserver①"><c- n>ResizeObserver</c-></a> <dfn class="idl-code" data-dfn-for="ResizeObserverCallback" data-dfn-type="argument" data-export id="dom-resizeobservercallback-observer"><code><c- g>observer</c-></code><a class="self-link" href="#dom-resizeobservercallback-observer"></a></dfn>);
</pre>
   <p>This callback delivers <code class="idl"><a data-link-type="idl" href="#resizeobserver" id="ref-for-resizeobserver②">ResizeObserver</a></code>'s notifications. It is invoked by a <a data-link-type="dfn" href="#broadcast-active-observations" id="ref-for-broadcast-active-observations">broadcast active observations</a> algorithm.</p>
   <h3 class="heading settled" data-level="2.3" id="resize-observer-entry-interface"><span class="secno">2.3. </span><span class="content">ResizeObserverEntry</span><a class="self-link" href="#resize-observer-entry-interface"></a></h3>
<pre class="idl highlight def">[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed①"><c- g>Exposed</c-></a>=<c- n>Window</c->]
<c- b>interface</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="interface" data-export id="resizeobserverentry"><code><c- g>ResizeObserverEntry</c-></code></dfn> {
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://dom.spec.whatwg.org/#element" id="ref-for-element⑧"><c- n>Element</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="Element" href="#dom-resizeobserverentry-target" id="ref-for-dom-resizeobserverentry-target"><c- g>target</c-></a>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://drafts.fxtf.org/geometry-1/#domrectreadonly" id="ref-for-domrectreadonly"><c- n>DOMRectReadOnly</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="DOMRectReadOnly" href="#dom-resizeobserverentry-contentrect" id="ref-for-dom-resizeobserverentry-contentrect"><c- g>contentRect</c-></a>;
    <c- b>readonly</c-> <c- b>attribute</c-> <c- b>sequence</c->&lt;<a class="n" data-link-type="idl-name" href="#resizeobserversize" id="ref-for-resizeobserversize"><c- n>ResizeObserverSize</c-></a>> <a class="idl-code" data-link-type="attribute" data-readonly data-type="sequence<ResizeObserverSize>" href="#dom-resizeobserverentry-borderboxsize" id="ref-for-dom-resizeobserverentry-borderboxsize"><c- g>borderBoxSize</c-></a>;
    <c- b>readonly</c-> <c- b>attribute</c-> <c- b>sequence</c->&lt;<a class="n" data-link-type="idl-name" href="#resizeobserversize" id="ref-for-resizeobserversize①"><c- n>ResizeObserverSize</c-></a>> <a class="idl-code" data-link-type="attribute" data-readonly data-type="sequence<ResizeObserverSize>" href="#dom-resizeobserverentry-contentboxsize" id="ref-for-dom-resizeobserverentry-contentboxsize"><c- g>contentBoxSize</c-></a>;
    <c- b>readonly</c-> <c- b>attribute</c-> <c- b>sequence</c->&lt;<a class="n" data-link-type="idl-name" href="#resizeobserversize" id="ref-for-resizeobserversize②"><c- n>ResizeObserverSize</c-></a>> <a class="idl-code" data-link-type="attribute" data-readonly data-type="sequence<ResizeObserverSize>" href="#dom-resizeobserverentry-devicepixelcontentboxsize" id="ref-for-dom-resizeobserverentry-devicepixelcontentboxsize"><c- g>devicePixelContentBoxSize</c-></a>;
};
</pre>
   <p class="note" role="note">contentRect is from the incubation phase of ResizeObserver and is only included for current web compat reasons. It may be deprecated in future levels.</p>
   <div>
    <dl>
     <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="ResizeObserverEntry" data-dfn-type="attribute" data-export id="dom-resizeobserverentry-target"><code>target</code></dfn>, <span> of type <a data-link-type="idl-name" href="https://dom.spec.whatwg.org/#element" id="ref-for-element⑨">Element</a>, readonly</span>
     <dd data-md>
      <p>The <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#element" id="ref-for-element①⓪">Element</a></code> whose size has changed.</p>
     <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="ResizeObserverEntry" data-dfn-type="attribute" data-export id="dom-resizeobserverentry-contentrect"><code>contentRect</code></dfn>, <span> of type <a data-link-type="idl-name" href="https://drafts.fxtf.org/geometry-1/#domrectreadonly" id="ref-for-domrectreadonly①">DOMRectReadOnly</a>, readonly</span>
     <dd data-md>
      <p><code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#element" id="ref-for-element①①">Element</a></code>'s <a data-link-type="dfn" href="#content-rect" id="ref-for-content-rect">content rect</a> when <code class="idl"><a data-link-type="idl" href="#callbackdef-resizeobservercallback" id="ref-for-callbackdef-resizeobservercallback①">ResizeObserverCallback</a></code> is invoked.</p>
     <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="ResizeObserverEntry" data-dfn-type="attribute" data-export id="dom-resizeobserverentry-borderboxsize"><code>borderBoxSize</code></dfn>, <span> of type sequence&lt;<a data-link-type="idl-name" href="#resizeobserversize" id="ref-for-resizeobserversize③">ResizeObserverSize</a>>, readonly</span>
     <dd data-md>
      <p>A sequence containing the <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#element" id="ref-for-element①②">Element</a></code>'s <a data-link-type="dfn" href="https://drafts.csswg.org/css-box-3/#border-box" id="ref-for-border-box">border box</a> size when <code class="idl"><a data-link-type="idl" href="#callbackdef-resizeobservercallback" id="ref-for-callbackdef-resizeobservercallback②">ResizeObserverCallback</a></code> is invoked.</p>
     <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="ResizeObserverEntry" data-dfn-type="attribute" data-export id="dom-resizeobserverentry-contentboxsize"><code>contentBoxSize</code></dfn>, <span> of type sequence&lt;<a data-link-type="idl-name" href="#resizeobserversize" id="ref-for-resizeobserversize④">ResizeObserverSize</a>>, readonly</span>
     <dd data-md>
      <p>A sequence containing the <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#element" id="ref-for-element①③">Element</a></code>'s <a data-link-type="dfn" href="#content-rect" id="ref-for-content-rect①">content rect</a> size when <code class="idl"><a data-link-type="idl" href="#callbackdef-resizeobservercallback" id="ref-for-callbackdef-resizeobservercallback③">ResizeObserverCallback</a></code> is invoked.</p>
     <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="ResizeObserverEntry" data-dfn-type="attribute" data-export id="dom-resizeobserverentry-devicepixelcontentboxsize"><code>devicePixelContentBoxSize</code></dfn>, <span> of type sequence&lt;<a data-link-type="idl-name" href="#resizeobserversize" id="ref-for-resizeobserversize⑤">ResizeObserverSize</a>>, readonly</span>
     <dd data-md>
      <p>A sequence containing the <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#element" id="ref-for-element①④">Element</a></code>'s <a data-link-type="dfn" href="#content-rect" id="ref-for-content-rect②">content rect</a> size in integral device pixels when <code class="idl"><a data-link-type="idl" href="#callbackdef-resizeobservercallback" id="ref-for-callbackdef-resizeobservercallback④">ResizeObserverCallback</a></code> is invoked.</p>
    </dl>
   </div>
   <p class="note" role="note"> The box size properties are exposed as sequences in order to support elements that have multiple fragments,
which occur in <a data-link-type="dfn" href="https://www.w3.org/TR/css3-multicol/#">multi-column</a> scenarios.
However the current definitions of <a data-link-type="dfn" href="#content-rect" id="ref-for-content-rect③">content rect</a> and <a data-link-type="dfn" href="https://drafts.csswg.org/css-box-3/#border-box" id="ref-for-border-box①">border box</a> do not mention how those boxes are affected by <span>multi-column</span> layout.
In this spec, there will only be a single ResizeObserverSize returned in the sequences,
which will correspond to the dimensions of the first column.
A future version of this spec will extend the returned sequences to contain the per-fragment size information. </p>
<pre class="idl highlight def"><c- b>interface</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="interface" data-export id="resizeobserversize"><code><c- g>ResizeObserverSize</c-></code></dfn> {
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double"><c- b>unrestricted</c-> <c- b>double</c-></a> <dfn class="idl-code" data-dfn-for="ResizeObserverSize" data-dfn-type="attribute" data-export data-readonly data-type="unrestricted double" id="dom-resizeobserversize-inlinesize"><code><c- g>inlineSize</c-></code><a class="self-link" href="#dom-resizeobserversize-inlinesize"></a></dfn>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double①"><c- b>unrestricted</c-> <c- b>double</c-></a> <dfn class="idl-code" data-dfn-for="ResizeObserverSize" data-dfn-type="attribute" data-export data-readonly data-type="unrestricted double" id="dom-resizeobserversize-blocksize"><code><c- g>blockSize</c-></code><a class="self-link" href="#dom-resizeobserversize-blocksize"></a></dfn>;
};
</pre>
   <h2 class="heading settled" data-level="3" id="processing-model"><span class="secno">3. </span><span class="content">Processing Model</span><a class="self-link" href="#processing-model"></a></h2>
   <h3 class="heading settled" data-level="3.1" id="resize-observation-interface"><span class="secno">3.1. </span><span class="content">ResizeObservation example struct</span><a class="self-link" href="#resize-observation-interface"></a></h3>
   <p class="note" role="note">This section is not normative. ResizeObservation is an example struct that can be used in implementation of Resize Observer. It is being
included here in order to help provide clarity during the processing model. It effectively holds observation information for a single <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#element" id="ref-for-element①⑤">Element</a></code>. This
interface is not visible to Javascript.</p>
<pre class="idl highlight def">[<dfn class="idl-code" data-dfn-for="ResizeObservation" data-dfn-type="constructor" data-export data-lt="ResizeObservation(target)" id="dom-resizeobservation-resizeobservation"><code><c- g>Constructor</c-></code><a class="self-link" href="#dom-resizeobservation-resizeobservation"></a></dfn>(<a class="n" data-link-type="idl-name" href="https://dom.spec.whatwg.org/#element" id="ref-for-element①⑥"><c- n>Element</c-></a> <dfn class="idl-code" data-dfn-for="ResizeObservation/ResizeObservation(target)" data-dfn-type="argument" data-export id="dom-resizeobservation-resizeobservation-target-target"><code><c- g>target</c-></code><a class="self-link" href="#dom-resizeobservation-resizeobservation-target-target"></a></dfn>)
]
<c- b>interface</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="interface" data-export id="resizeobservation"><code><c- g>ResizeObservation</c-></code></dfn> {
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://dom.spec.whatwg.org/#element" id="ref-for-element①⑦"><c- n>Element</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="Element" href="#dom-resizeobservation-target" id="ref-for-dom-resizeobservation-target"><c- g>target</c-></a>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="#enumdef-resizeobserverboxoptions" id="ref-for-enumdef-resizeobserverboxoptions①"><c- n>ResizeObserverBoxOptions</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="ResizeObserverBoxOptions" href="#dom-resizeobservation-observedbox" id="ref-for-dom-resizeobservation-observedbox"><c- g>observedBox</c-></a>;
    <c- b>readonly</c-> <c- b>attribute</c-> <c- b>sequence</c->&lt;<a class="n" data-link-type="idl-name" href="#resizeobserversize" id="ref-for-resizeobserversize⑥"><c- n>ResizeObserverSize</c-></a>> <a class="idl-code" data-link-type="attribute" data-readonly data-type="sequence<ResizeObserverSize>" href="#dom-resizeobservation-lastreportedsizes" id="ref-for-dom-resizeobservation-lastreportedsizes"><c- g>lastReportedSizes</c-></a>;
};
</pre>
   <div>
    <dl>
     <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="ResizeObservation" data-dfn-type="attribute" data-export id="dom-resizeobservation-target"><code>target</code></dfn>, <span> of type <a data-link-type="idl-name" href="https://dom.spec.whatwg.org/#element" id="ref-for-element①⑧">Element</a>, readonly</span>
     <dd data-md>
      <p>The observed <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#element" id="ref-for-element①⑨">Element</a></code>.</p>
     <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="ResizeObservation" data-dfn-type="attribute" data-export id="dom-resizeobservation-observedbox"><code>observedBox</code></dfn>, <span> of type <a data-link-type="idl-name" href="#enumdef-resizeobserverboxoptions" id="ref-for-enumdef-resizeobserverboxoptions②">ResizeObserverBoxOptions</a>, readonly</span>
     <dd data-md>
      <p>Which box is being observed.</p>
     <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="ResizeObservation" data-dfn-type="attribute" data-export id="dom-resizeobservation-lastreportedsizes"><code>lastReportedSizes</code></dfn>, <span> of type sequence&lt;<a data-link-type="idl-name" href="#resizeobserversize" id="ref-for-resizeobserversize⑦">ResizeObserverSize</a>>, readonly</span>
     <dd data-md>
      <p>Ordered sequence of last reported sizes.</p>
    </dl>
   </div>
   <div>
    <dl>
     <dt data-md><dfn class="idl-code" data-dfn-for="ResizeObservation" data-dfn-type="constructor" data-export data-lt="ResizeObservation(target, options)" id="dom-resizeobservation-resizeobservation-target-options"><code>new ResizeObservation(target, observedBox)</code><a class="self-link" href="#dom-resizeobservation-resizeobservation-target-options"></a></dfn>
     <dd data-md>
      <ol>
       <li data-md>
        <p>Let <var>this</var> be a new <code class="idl"><a data-link-type="idl" href="#resizeobservation" id="ref-for-resizeobservation②">ResizeObservation</a></code> object</p>
       <li data-md>
        <p>Set <var>this</var> internal <code class="idl"><a data-link-type="idl" href="#dom-resizeobservation-target" id="ref-for-dom-resizeobservation-target①">target</a></code> slot to <var>target</var></p>
       <li data-md>
        <p>Set <var>this</var> internal <code class="idl"><a data-link-type="idl" href="#dom-resizeobservation-observedbox" id="ref-for-dom-resizeobservation-observedbox①">observedBox</a></code> slot to <var>observedBox</var></p>
       <li data-md>
        <p>Set <var>this</var> internal <code class="idl"><a data-link-type="idl" href="#dom-resizeobservation-lastreportedsizes" id="ref-for-dom-resizeobservation-lastreportedsizes①">lastReportedSizes</a></code> slot to [(0,0)]</p>
      </ol>
     <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="ResizeObservation" data-dfn-type="method" data-export id="dom-resizeobservation-isactive"><code>isActive()</code></dfn>
     <dd data-md>
      <ol>
       <li data-md>
        <p>Set <var>currentSize</var> by <a data-link-type="dfn" href="#calculate-box-size①" id="ref-for-calculate-box-size①">calculate box size</a> given <var>target</var> and <var>observedBox</var>.</p>
       <li data-md>
        <p>Return true if <var>currentSize</var> is not equal to the first entry in this.<code class="idl"><a data-link-type="idl" href="#dom-resizeobservation-lastreportedsizes" id="ref-for-dom-resizeobservation-lastreportedsizes②">lastReportedSizes</a></code>.</p>
       <li data-md>
        <p>Return false.</p>
      </ol>
    </dl>
   </div>
   <h3 class="heading settled" data-level="3.2" id="internal-slot-definitions"><span class="secno">3.2. </span><span class="content">Internal Slot Definitions</span><a class="self-link" href="#internal-slot-definitions"></a></h3>
   <h4 class="heading settled" data-level="3.2.1" id="document-slots"><span class="secno">3.2.1. </span><span class="content">Document</span><a class="self-link" href="#document-slots"></a></h4>
   <p><a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-document" id="ref-for-concept-document">Document</a> has a <dfn class="dfn-paneled idl-code" data-dfn-for="Document" data-dfn-type="attribute" data-export id="dom-document-resizeobservers"><code>resizeObservers</code></dfn> slot that is a list of <code class="idl"><a data-link-type="idl" href="#resizeobserver" id="ref-for-resizeobserver③">ResizeObserver</a></code>s in this document. It is initialized to empty.</p>
   <h4 class="heading settled" data-level="3.2.2" id="resize-observer-slots"><span class="secno">3.2.2. </span><span class="content">ResizeObserver</span><a class="self-link" href="#resize-observer-slots"></a></h4>
   <p><code class="idl"><a data-link-type="idl" href="#resizeobserver" id="ref-for-resizeobserver④">ResizeObserver</a></code> has a <dfn class="dfn-paneled idl-code" data-dfn-for="ResizeObserver" data-dfn-type="attribute" data-export id="dom-resizeobserver-callback"><code>callback</code></dfn> slot, initialized by constructor.</p>
   <p><code class="idl"><a data-link-type="idl" href="#resizeobserver" id="ref-for-resizeobserver⑤">ResizeObserver</a></code> has an <dfn class="dfn-paneled idl-code" data-dfn-for="ResizeObserver" data-dfn-type="attribute" data-export id="dom-resizeobserver-observationtargets"><code>observationTargets</code></dfn> slot, which is a list of <code class="idl"><a data-link-type="idl" href="#resizeobservation" id="ref-for-resizeobservation③">ResizeObservation</a></code>s.
It represents all Elements being observed.</p>
   <p><code class="idl"><a data-link-type="idl" href="#resizeobserver" id="ref-for-resizeobserver⑥">ResizeObserver</a></code> has a <dfn class="dfn-paneled idl-code" data-dfn-for="ResizeObserver" data-dfn-type="attribute" data-export id="dom-resizeobserver-activetargets"><code>activeTargets</code></dfn> slot, which is a list of <code class="idl"><a data-link-type="idl" href="#resizeobservation" id="ref-for-resizeobservation④">ResizeObservation</a></code>s. It represents all Elements whose size has changed since last observation broadcast that are eligible for broadcast.</p>
   <p><code class="idl"><a data-link-type="idl" href="#resizeobserver" id="ref-for-resizeobserver⑦">ResizeObserver</a></code> has a <dfn class="dfn-paneled idl-code" data-dfn-for="ResizeObserver" data-dfn-type="attribute" data-export id="dom-resizeobserver-skippedtargets"><code>skippedTargets</code></dfn> slot, which is a list of <code class="idl"><a data-link-type="idl" href="#resizeobservation" id="ref-for-resizeobservation⑤">ResizeObservation</a></code>s. It represents all Elements whose size has changed since last observation broadcast that are <strong>not</strong> eligible for broadcast</p>
   <h3 class="heading settled" data-level="3.3" id="css-definitions"><span class="secno">3.3. </span><span class="content">CSS Definitions</span><a class="self-link" href="#css-definitions"></a></h3>
   <h4 class="heading settled" data-level="3.3.1" id="content-rect-h"><span class="secno">3.3.1. </span><span class="content">content rect</span><a class="self-link" href="#content-rect-h"></a></h4>
    DOM <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="content-rect">content rect</dfn> is a rect whose: 
   <ul>
    <li data-md>
     <p>width is <a data-link-type="dfn" href="https://www.w3.org/TR/CSS2/box.html#content-width" id="ref-for-content-width">content width</a></p>
    <li data-md>
     <p>height is <a data-link-type="dfn" href="https://www.w3.org/TR/CSS2/box.html#content-height" id="ref-for-content-height">content height</a></p>
    <li data-md>
     <p>top is <a data-link-type="dfn" href="https://drafts.csswg.org/css-box-3/#padding-top" id="ref-for-padding-top">padding top</a></p>
    <li data-md>
     <p>left is <a data-link-type="dfn" href="https://drafts.csswg.org/css-box-3/#padding-left" id="ref-for-padding-left">padding left</a></p>
   </ul>
   <p><a data-link-type="dfn" href="https://www.w3.org/TR/CSS2/box.html#content-width" id="ref-for-content-width①">content width</a> spec does not mention how <a data-link-type="dfn" href="https://www.w3.org/TR/css3-multicol/#">multi-column</a> layout affects content box. In this spec, content width of an <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#element" id="ref-for-element②⓪">Element</a></code> inside <span>multi-column</span> is the result of <code>getComputedStyle(element).width</code>. This currently evaluates to width of the first column.</p>
   <p>Having content rect position be padding-top/left is useful for absolute positioning of target’s children. Absolute position coordinate space origin is topLeft of the padding rect.</p>
   <p>Watching content rect means that:</p>
   <ul>
    <li data-md>
     <p>observation will fire when watched Element is inserted/removed from DOM.</p>
    <li data-md>
     <p>observation will fire when watched Element display gets set to none.</p>
    <li data-md>
     <p>non-replaced inline Elements will always have an empty content rect.</p>
    <li data-md>
     <p>observations will not be triggered by CSS transforms.</p>
   </ul>
   <p>Web content can also contain SVG elements. SVG Elements define <a data-link-type="dfn" href="https://www.w3.org/TR/SVG2/coords.html#BoundingBoxes" id="ref-for-BoundingBoxes">bounding box</a> instead of a content box.
Content rect for <a data-link-type="dfn" href="https://www.w3.org/TR/SVG2/#InterfaceSVGGraphicsElementtypes.html#InterfaceSVGGraphicsElement" id="ref-for-InterfaceSVGGraphicsElementtypes.html#InterfaceSVGGraphicsElement">SVGGraphicsElement</a>s is a rect whose:</p>
   <ul>
    <li data-md>
     <p>width is <a data-link-type="dfn" href="https://www.w3.org/TR/SVG2/coords.html#BoundingBoxes" id="ref-for-BoundingBoxes①">bounding box</a> width</p>
    <li data-md>
     <p>height is <a data-link-type="dfn" href="https://www.w3.org/TR/SVG2/coords.html#BoundingBoxes" id="ref-for-BoundingBoxes②">bounding box</a> height</p>
    <li data-md>
     <p>top and left are 0</p>
   </ul>
   <h3 class="heading settled" data-level="3.4" id="algorithms"><span class="secno">3.4. </span><span class="content">Algorithms</span><a class="self-link" href="#algorithms"></a></h3>
   <h4 class="heading settled" data-level="3.4.1" id="gather-active-observations-h"><span class="secno">3.4.1. </span><span class="content">Gather active observations at depth</span><a class="self-link" href="#gather-active-observations-h"></a></h4>
   <p>It computes all active observations for a <var>document</var>. To <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="gather-active-observations-at-depth">gather active observations at depth</dfn>, run these steps:</p>
   <ol>
    <li data-md>
     <p>Let <var>depth</var> be the depth passed in.</p>
    <li data-md>
     <p>For each <var>observer</var> in <code class="idl"><a data-link-type="idl" href="#dom-document-resizeobservers" id="ref-for-dom-document-resizeobservers">resizeObservers</a></code> run these steps:</p>
     <ol>
      <li data-md>
       <p>Clear <var>observer</var>’s <code class="idl"><a data-link-type="idl" href="#dom-resizeobserver-activetargets" id="ref-for-dom-resizeobserver-activetargets①">activeTargets</a></code>, and <code class="idl"><a data-link-type="idl" href="#dom-resizeobserver-skippedtargets" id="ref-for-dom-resizeobserver-skippedtargets">skippedTargets</a></code>.</p>
      <li data-md>
       <p>For each <var>observation</var> in <var>observer</var>.<code class="idl"><a data-link-type="idl" href="#dom-resizeobserver-observationtargets" id="ref-for-dom-resizeobserver-observationtargets④">observationTargets</a></code> run this step:</p>
       <ol>
        <li data-md>
         <p>If <var>observation</var>.<code class="idl"><a data-link-type="idl" href="#dom-resizeobservation-isactive" id="ref-for-dom-resizeobservation-isactive">isActive()</a></code> is true</p>
         <ol>
          <li data-md>
           <p>Let <var>targetDepth</var> be result of <a data-link-type="dfn" href="#calculate-depth-for-node" id="ref-for-calculate-depth-for-node">calculate depth for node</a> for <var>observation</var>.<code class="idl"><a data-link-type="idl" href="#dom-resizeobservation-target" id="ref-for-dom-resizeobservation-target②">target</a></code>.</p>
          <li data-md>
           <p>If <var>targetDepth</var> is greater than <var>depth</var> then add <var>observation</var> to <code class="idl"><a data-link-type="idl" href="#dom-resizeobserver-activetargets" id="ref-for-dom-resizeobserver-activetargets②">activeTargets</a></code>.</p>
          <li data-md>
           <p>Else add <var>observation</var> to <code class="idl"><a data-link-type="idl" href="#dom-resizeobserver-skippedtargets" id="ref-for-dom-resizeobserver-skippedtargets①">skippedTargets</a></code>.</p>
         </ol>
       </ol>
     </ol>
   </ol>
   <h4 class="heading settled" data-level="3.4.2" id="has-active-observations-h"><span class="secno">3.4.2. </span><span class="content">Has active observations</span><a class="self-link" href="#has-active-observations-h"></a></h4>
   <p>To determine if <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#document" id="ref-for-document①">Document</a></code> <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="has-active-observations">has active observations</dfn> run these steps:</p>
   <ol>
    <li data-md>
     <p>For each <var>observer</var> in <code class="idl"><a data-link-type="idl" href="#dom-document-resizeobservers" id="ref-for-dom-document-resizeobservers①">resizeObservers</a></code> run this step:</p>
     <ol>
      <li data-md>
       <p>If <var>observer</var>.<code class="idl"><a data-link-type="idl" href="#dom-resizeobserver-activetargets" id="ref-for-dom-resizeobserver-activetargets③">activeTargets</a></code> is not empty, return true.</p>
     </ol>
    <li data-md>
     <p>return false.</p>
   </ol>
   <h4 class="heading settled" data-level="3.4.3" id="has-skipped-observations-h"><span class="secno">3.4.3. </span><span class="content">Has skipped observations</span><a class="self-link" href="#has-skipped-observations-h"></a></h4>
   <p>To determine if <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#document" id="ref-for-document②">Document</a></code> <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="has-skipped-observations">has skipped observations</dfn> run these steps:</p>
   <ol>
    <li data-md>
     <p>For each <var>observer</var> in <code class="idl"><a data-link-type="idl" href="#dom-document-resizeobservers" id="ref-for-dom-document-resizeobservers②">resizeObservers</a></code> run this step:</p>
     <ol>
      <li data-md>
       <p>If <var>observer</var>.<code class="idl"><a data-link-type="idl" href="#dom-resizeobserver-skippedtargets" id="ref-for-dom-resizeobserver-skippedtargets②">skippedTargets</a></code> is not empty, return true.</p>
     </ol>
    <li data-md>
     <p>return false.</p>
   </ol>
   <h4 class="heading settled" data-level="3.4.4" id="create-and-populate-resizeobserverentry-h"><span class="secno">3.4.4. </span><span class="content"> Create and populate a ResizeObserverEntry </span><a class="self-link" href="#create-and-populate-resizeobserverentry-h"></a></h4>
    To <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="create-and-populate-a-resizeobserverentry">create and populate a ResizeObserverEntry</dfn> for a given <var>target</var>,
run these steps: 
   <ol>
    <li data-md>
     <p>Let <var>this</var> be a new <code class="idl"><a data-link-type="idl" href="#resizeobserverentry" id="ref-for-resizeobserverentry①">ResizeObserverEntry</a></code>.</p>
    <li data-md>
     <p>Set <var>this</var>.<code class="idl"><a data-link-type="idl" href="#dom-resizeobserverentry-target" id="ref-for-dom-resizeobserverentry-target①">target</a></code> slot to <var>target</var>.</p>
    <li data-md>
     <p>Set <var>this</var>.<code class="idl"><a data-link-type="idl" href="#dom-resizeobserverentry-borderboxsize" id="ref-for-dom-resizeobserverentry-borderboxsize①">borderBoxSize</a></code> slot to result of <a href="#calculate-box-size"> computing size given <var>target</var> and observedBox of "border-box"</a>.</p>
    <li data-md>
     <p>Set <var>this</var>.<code class="idl"><a data-link-type="idl" href="#dom-resizeobserverentry-contentboxsize" id="ref-for-dom-resizeobserverentry-contentboxsize①">contentBoxSize</a></code> slot to result of <a href="#calculate-box-size"> computing size given <var>target</var> and observedBox of "content-box"</a>.</p>
    <li data-md>
     <p>Set <var>this</var>.<code class="idl"><a data-link-type="idl" href="#dom-resizeobserverentry-devicepixelcontentboxsize" id="ref-for-dom-resizeobserverentry-devicepixelcontentboxsize①">devicePixelContentBoxSize</a></code> slot to result of <a href="#calculate-box-size"> computing size given <var>target</var> and observedBox of "device-pixel-content-box"</a>.</p>
    <li data-md>
     <p>Set <var>this</var>.<code class="idl"><a data-link-type="idl" href="#dom-resizeobserverentry-contentrect" id="ref-for-dom-resizeobserverentry-contentrect①">contentRect</a></code> to logical <var>this</var>.<code class="idl"><a data-link-type="idl" href="#dom-resizeobserverentry-contentboxsize" id="ref-for-dom-resizeobserverentry-contentboxsize②">contentBoxSize</a></code> given <var>target</var> and observedBox of "content-box".</p>
    <li data-md>
     <p>If <var>target</var> is not an SVG element do these steps:</p>
     <ol>
      <li data-md>
       <p>Set <var>this</var>.<var>contentRect</var>.top to <var>target</var>.<a data-link-type="dfn" href="https://drafts.csswg.org/css-box-3/#padding-top" id="ref-for-padding-top①">padding top</a>.</p>
      <li data-md>
       <p>Set <var>this</var>.<var>contentRect</var>.left to <var>target</var>.<a data-link-type="dfn" href="https://drafts.csswg.org/css-box-3/#padding-left" id="ref-for-padding-left①">padding left</a>.</p>
     </ol>
    <li data-md>
     <p>If <var>target</var> is an SVG element do these steps:</p>
     <ol>
      <li data-md>
       <p>Set <var>this</var>.<var>contentRect</var>.top and <var>this</var>.contentRect.left to 0.</p>
     </ol>
   </ol>
   <h4 class="heading settled" data-level="3.4.5" id="broadcast-resize-notifications-h"><span class="secno">3.4.5. </span><span class="content">Broadcast active observations</span><a class="self-link" href="#broadcast-resize-notifications-h"></a></h4>
   <p><dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="broadcast-active-observations">broadcast active observations</dfn> delivers all active observations
in a document, and returns the depth of the shallowest broadcast target depth.</p>
   <p>To broadcast active observations for a <var>document</var>,
run these steps:</p>
   <ol>
    <li data-md>
     <p>Let <var>shallowestTargetDepth</var> be ∞</p>
    <li data-md>
     <p>For each <var>observer</var> in <var>document</var>.<code class="idl"><a data-link-type="idl" href="#dom-document-resizeobservers" id="ref-for-dom-document-resizeobservers③">resizeObservers</a></code> run these steps:</p>
     <ol>
      <li data-md>
       <p>If <var>observer</var>.<code class="idl"><a data-link-type="idl" href="#dom-resizeobserver-activetargets" id="ref-for-dom-resizeobserver-activetargets④">activeTargets</a></code> slot is empty, continue.</p>
      <li data-md>
       <p>Let <var>entries</var> be an empty list of <code class="idl"><a data-link-type="idl" href="#resizeobserverentry" id="ref-for-resizeobserverentry②">ResizeObserverEntry</a></code>ies.</p>
      <li data-md>
       <p>For each <var>observation</var> in <code class="idl"><a data-link-type="idl" href="#dom-resizeobserver-activetargets" id="ref-for-dom-resizeobserver-activetargets⑤">activeTargets</a></code> perform these steps:</p>
       <ol>
        <li data-md>
         <p>Let <var>entry</var> be the result of running <a data-link-type="dfn" href="#create-and-populate-a-resizeobserverentry" id="ref-for-create-and-populate-a-resizeobserverentry">create and populate a <code class="idl"><a data-link-type="idl" href="#resizeobserverentry" id="ref-for-resizeobserverentry③">ResizeObserverEntry</a></code></a> given <var>observation</var>.<code class="idl"><a data-link-type="idl" href="#dom-resizeobservation-target" id="ref-for-dom-resizeobservation-target③">target</a></code>.</p>
        <li data-md>
         <p>Add <var>entry</var> to <var>entries</var>.</p>
        <li data-md>
         <p>Set <var>observation</var>.<code class="idl"><a data-link-type="idl" href="#dom-resizeobservation-lastreportedsizes" id="ref-for-dom-resizeobservation-lastreportedsizes③">lastReportedSizes</a></code> to matching <var>entry</var> sizes.</p>
         <ol>
          <li data-md>
           <p>Matching sizes are <var>entry</var>.<code class="idl"><a data-link-type="idl" href="#dom-resizeobserverentry-borderboxsize" id="ref-for-dom-resizeobserverentry-borderboxsize②">borderBoxSize</a></code> if <var>observation</var>.<code class="idl"><a data-link-type="idl" href="#dom-resizeobservation-observedbox" id="ref-for-dom-resizeobservation-observedbox②">observedBox</a></code> is "border-box"</p>
          <li data-md>
           <p>Matching sizes are <var>entry</var>.<code class="idl"><a data-link-type="idl" href="#dom-resizeobserverentry-contentboxsize" id="ref-for-dom-resizeobserverentry-contentboxsize③">contentBoxSize</a></code> if <var>observation</var>.<code class="idl"><a data-link-type="idl" href="#dom-resizeobservation-observedbox" id="ref-for-dom-resizeobservation-observedbox③">observedBox</a></code> is "content-box"</p>
          <li data-md>
           <p>Matching sizes are <var>entry</var>.<code class="idl"><a data-link-type="idl" href="#dom-resizeobserverentry-devicepixelcontentboxsize" id="ref-for-dom-resizeobserverentry-devicepixelcontentboxsize②">devicePixelContentBoxSize</a></code> if <var>observation</var>.<code class="idl"><a data-link-type="idl" href="#dom-resizeobservation-observedbox" id="ref-for-dom-resizeobservation-observedbox④">observedBox</a></code> is "device-pixel-content-box"</p>
         </ol>
        <li data-md>
         <p>Set <var>targetDepth</var> to the result of <a data-link-type="dfn" href="#calculate-depth-for-node" id="ref-for-calculate-depth-for-node①">calculate depth for node</a> for <var>observation</var>.<code class="idl"><a data-link-type="idl" href="#dom-resizeobservation-target" id="ref-for-dom-resizeobservation-target④">target</a></code>.</p>
        <li data-md>
         <p>Set <var>shallowestTargetDepth</var> to <var>targetDepth</var> if <var>targetDepth</var> &lt; <var>shallowestTargetDepth</var></p>
       </ol>
      <li data-md>
       <p>Invoke <var>observer</var>.<code class="idl"><a data-link-type="idl" href="#dom-resizeobserver-callback" id="ref-for-dom-resizeobserver-callback">callback</a></code> with <var>entries</var>.</p>
      <li data-md>
       <p>Clear <var>observer</var>.<code class="idl"><a data-link-type="idl" href="#dom-resizeobserver-activetargets" id="ref-for-dom-resizeobserver-activetargets⑥">activeTargets</a></code>.</p>
     </ol>
    <li data-md>
     <p>Return <var>shallowestTargetDepth</var>.</p>
   </ol>
   <h4 class="heading settled" data-level="3.4.6" id="deliver-resize-error"><span class="secno">3.4.6. </span><span class="content">Deliver Resize Loop Error</span><a class="self-link" href="#deliver-resize-error"></a></h4>
   <p>To <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="deliver-resize-loop-error-notification">deliver resize loop error notification</dfn> run these steps:</p>
   <ol>
    <li data-md>
     <p>Create a new <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/webappapis.html#errorevent" id="ref-for-errorevent">ErrorEvent</a></code>.</p>
    <li data-md>
     <p>Initialize <var>event</var>’s message slot to "ResizeObserver loop completed with undelivered notifications.".</p>
    <li data-md>
     <p>Report the exception <var>event</var>.</p>
   </ol>
   <h4 class="heading settled" data-level="3.4.7" id="calculate-depth-for-node-h"><span class="secno">3.4.7. </span><span class="content">Calculate depth for node</span><a class="self-link" href="#calculate-depth-for-node-h"></a></h4>
   <p>To <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="calculate-depth-for-node">calculate depth for node</dfn>, given a <var>node</var>, run these steps:</p>
   <ol>
    <li data-md>
     <p>Let <var>p</var> be the parent-traversal path from <var>node</var> to a root Element of this element’s flattened DOM tree.</p>
    <li data-md>
     <p>Return number of nodes in <var>p</var>.</p>
   </ol>
   <h4 class="heading settled" data-level="3.4.8" id="calculate-box-size"><span class="secno">3.4.8. </span><span class="content">Calculate box size, given target and observed box</span><a class="self-link" href="#calculate-box-size"></a></h4>
   <p>This algorithm computes <var>target</var> <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#element" id="ref-for-element②①">Element</a></code>'s observed box size. Type of box is
described by <code class="idl"><a data-link-type="idl" href="#enumdef-resizeobserverboxoptions" id="ref-for-enumdef-resizeobserverboxoptions③">ResizeObserverBoxOptions</a></code>.
SVG Elements are an exception. SVG size is always its bounding box size, because SVG
elements do not use standard CSS box model.</p>
   <p>To <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="calculate-box-size①">calculate box size</dfn>, given <var>target</var> and <var>observedBox</var>, run these steps:</p>
   <ol>
    <li data-md>
     <p>If <var>target</var> is an <code class="idl"><a data-link-type="idl" href="https://svgwg.org/svg2-draft/types.html#InterfaceSVGGraphicsElement" id="ref-for-InterfaceSVGGraphicsElement">SVGGraphicsElement</a></code></p>
     <ol>
      <li data-md>
       <p>Set <var>computedSize</var>.inlineSize to <var>target</var>’s <a data-link-type="dfn" href="https://www.w3.org/TR/SVG2/coords.html#BoundingBoxes" id="ref-for-BoundingBoxes③">bounding box</a> inline length.</p>
      <li data-md>
       <p>Set <var>computedSize</var>.blockSize to <var>target</var>’s <a data-link-type="dfn" href="https://www.w3.org/TR/SVG2/coords.html#BoundingBoxes" id="ref-for-BoundingBoxes④">bounding box</a> block length.</p>
     </ol>
    <li data-md>
     <p>If <var>target</var> is not an <code class="idl"><a data-link-type="idl" href="https://svgwg.org/svg2-draft/types.html#InterfaceSVGGraphicsElement" id="ref-for-InterfaceSVGGraphicsElement①">SVGGraphicsElement</a></code></p>
     <ol>
      <li data-md>
       <p>If <var>observedBox</var> is "border-box"</p>
       <ol>
        <li data-md>
         <p>Set <var>computedSize</var>.inlineSize to target’s <a data-link-type="dfn" href="https://drafts.csswg.org/css-box-3/#border-area" id="ref-for-border-area">border area</a> inline length.</p>
        <li data-md>
         <p>Set <var>computedSize</var>.blockSize to target’s <a data-link-type="dfn" href="https://drafts.csswg.org/css-box-3/#border-area" id="ref-for-border-area①">border area</a> block length.</p>
       </ol>
      <li data-md>
       <p>If <var>observedBox</var> is "content-box"</p>
       <ol>
        <li data-md>
         <p>Set <var>computedSize</var>.inlineSize to target’s <a data-link-type="dfn" href="https://drafts.csswg.org/css-box-3/#content-area" id="ref-for-content-area②">content area</a> inline length.</p>
        <li data-md>
         <p>Set <var>computedSize</var>.blockSize to target’s <a data-link-type="dfn" href="https://drafts.csswg.org/css-box-3/#content-area" id="ref-for-content-area③">content area</a> block length.</p>
       </ol>
      <li data-md>
       <p>If <var>observedBox</var> is "device-pixel-content-box"</p>
       <ol>
        <li data-md>
         <p>Set <var>computedSize</var>.inlineSize to target’s <a data-link-type="dfn" href="https://drafts.csswg.org/css-box-3/#content-area" id="ref-for-content-area④">content area</a> inline length, in integral device pixels.</p>
        <li data-md>
         <p>Set <var>computedSize</var>.blockSize to target’s <a data-link-type="dfn" href="https://drafts.csswg.org/css-box-3/#content-area" id="ref-for-content-area⑤">content area</a> block length, in integral device pixels.</p>
       </ol>
      <li data-md>
       <p>return <var>computedSize</var>.</p>
     </ol>
   </ol>
   <h3 class="heading settled" data-level="3.5" id="lifetime"><span class="secno">3.5. </span><span class="content">ResizeObserver Lifetime</span><a class="self-link" href="#lifetime"></a></h3>
   <p>A <code class="idl"><a data-link-type="idl" href="#resizeobserver" id="ref-for-resizeobserver⑧">ResizeObserver</a></code> will remain alive until both of these conditions are met:</p>
   <ul>
    <li data-md>
     <p>there are no scripting references to the observer.</p>
    <li data-md>
     <p>the observer is not observing any targets.</p>
   </ul>
   <h3 class="heading settled" data-level="3.6" id="integrations"><span class="secno">3.6. </span><span class="content">External Spec Integrations</span><a class="self-link" href="#integrations"></a></h3>
   <h4 class="heading settled" data-level="3.6.1" id="html-event-loop"><span class="secno">3.6.1. </span><span class="content"> HTML Processing Model: Event Loop</span><a class="self-link" href="#html-event-loop"></a></h4>
   <p><code class="idl"><a data-link-type="idl" href="#resizeobserver" id="ref-for-resizeobserver⑨">ResizeObserver</a></code> processing happens inside the step 7.12 of the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#processing-model-8" id="ref-for-processing-model-8">HTML Processing Model</a> event loop.</p>
   <p>Step 12 is currently underspecified as:</p>
   <p><q>For each fully active Document in docs, update the rendering or user interface of that Document and its browsing context to reflect the current state.</q>.</p>
   <p>Existing step 12 can be fully specified as:</p>
   <p>For each fully active Document in docs, run the following steps for that Document and its browsing contents:</p>
   <ol>
    <li data-md>
     <p>Recalc styles</p>
    <li data-md>
     <p>Update layout</p>
    <li data-md>
     <p>Paint</p>
   </ol>
   <p><code class="idl"><a data-link-type="idl" href="#resizeobserver" id="ref-for-resizeobserver①⓪">ResizeObserver</a></code> extends step 12 with resize notifications.
It tries to deliver all pending notifications by looping
until no pending notifications are available. This can cause
an infinite loop.</p>
   <p>Infinite loop is prevented by shrinking the set of
nodes that can notify at every iteration. In each iteration,
only nodes deeper than the shallowest node in previous iteration
can notify.</p>
   <p>An error is generated if notification loop completes, and there
are undelivered notifications. Elements with undelivered notifications
will be considered for delivery in the next loop.</p>
   <p>Step 12 with <code class="idl"><a data-link-type="idl" href="#resizeobserver" id="ref-for-resizeobserver①①">ResizeObserver</a></code> notifications is:</p>
   <p>For each fully active Document in docs, run the following steps for that Document and its browsing context:</p>
   <ol>
    <li data-md>
     <p>Recalc styles</p>
    <li data-md>
     <p>Update layout</p>
    <li data-md>
     <p>Set <var>depth</var> to 0</p>
    <li data-md>
     <p><a data-link-type="dfn" href="#gather-active-observations-at-depth" id="ref-for-gather-active-observations-at-depth">Gather active observations at depth</a> <var>depth</var> for <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#document" id="ref-for-document③">Document</a></code></p>
    <li data-md>
     <p>Repeat while document <a data-link-type="dfn" href="#has-active-observations" id="ref-for-has-active-observations">has active observations</a></p>
     <ol start="2">
      <li data-md>
       <p>Set <var>depth</var> to <a data-link-type="dfn" href="#broadcast-active-observations" id="ref-for-broadcast-active-observations①">broadcast active observations</a>.</p>
      <li data-md>
       <p>Recalc styles</p>
      <li data-md>
       <p>Update layout</p>
      <li data-md>
       <p><a data-link-type="dfn" href="#gather-active-observations-at-depth" id="ref-for-gather-active-observations-at-depth①">Gather active observations at depth</a> <var>depth</var> for <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#document" id="ref-for-document④">Document</a></code></p>
     </ol>
    <li data-md>
     <p>If <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#document" id="ref-for-document⑤">Document</a></code> <a data-link-type="dfn" href="#has-skipped-observations" id="ref-for-has-skipped-observations">has skipped observations</a> then <a data-link-type="dfn" href="#deliver-resize-loop-error-notification" id="ref-for-deliver-resize-loop-error-notification">deliver resize loop error notification</a></p>
    <li data-md>
     <p>Update the rendering or user interface of <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#document" id="ref-for-document⑥">Document</a></code> and its browsing context to reflect the current state.</p>
   </ol>
  </main>
  <h2 class="no-ref no-num heading settled" id="conformance"><span class="content"> Conformance</span><a class="self-link" href="#conformance"></a></h2>
  <h3 class="heading settled" id="document-conventions"><span class="content"> Document conventions</span><a class="self-link" href="#document-conventions"></a></h3>
  <p>Conformance requirements are expressed with a combination of
	descriptive assertions and RFC 2119 terminology. The key words “MUST”,
	“MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, “SHOULD NOT”,
	“RECOMMENDED”, “MAY”, and “OPTIONAL” in the normative parts of this
	document are to be interpreted as described in RFC 2119.
	However, for readability, these words do not appear in all uppercase
	letters in this specification. </p>
  <p>All of the text of this specification is normative except sections
	explicitly marked as non-normative, examples, and notes. <a data-link-type="biblio" href="#biblio-rfc2119">[RFC2119]</a> </p>
  <p>Examples in this specification are introduced with the words “for example”
	or are set apart from the normative text with <code>class="example"</code>,
	like this: </p>
  <div class="example" id="example-ae2b6bc0">
   <a class="self-link" href="#example-ae2b6bc0"></a> 
   <p>This is an example of an informative example. </p>
  </div>
  <p>Informative notes begin with the word “Note” and are set apart from the
	normative text with <code>class="note"</code>, like this: </p>
  <p class="note" role="note">Note, this is an informative note. </p>
  <p>Advisements are normative sections styled to evoke special attention and are
	set apart from other normative text with <code>&lt;strong class="advisement"></code>, like
	this: <strong class="advisement"> UAs MUST provide an accessible alternative. </strong> </p>
  <h3 class="heading settled" id="conform-classes"><span class="content"> Conformance classes</span><a class="self-link" href="#conform-classes"></a></h3>
  <p>Conformance to this specification
	is defined for three conformance classes: </p>
  <dl>
   <dt>style sheet 
   <dd>A <a href="http://www.w3.org/TR/CSS2/conform.html#style-sheet">CSS
			style sheet</a>. 
   <dt>renderer 
   <dd>A <a href="http://www.w3.org/TR/CSS2/conform.html#user-agent">UA</a> that interprets the semantics of a style sheet and renders
			documents that use them. 
   <dt>authoring tool 
   <dd>A <a href="http://www.w3.org/TR/CSS2/conform.html#user-agent">UA</a> that writes a style sheet. 
  </dl>
  <p>A style sheet is conformant to this specification
	if all of its statements that use syntax defined in this module are valid
	according to the generic CSS grammar and the individual grammars of each
	feature defined in this module. </p>
  <p>A renderer is conformant to this specification
	if, in addition to interpreting the style sheet as defined by the
	appropriate specifications, it supports all the features defined
	by this specification by parsing them correctly
	and rendering the document accordingly. However, the inability of a
	UA to correctly render a document due to limitations of the device
	does not make the UA non-conformant. (For example, a UA is not
	required to render color on a monochrome monitor.) </p>
  <p>An authoring tool is conformant to this specification
	if it writes style sheets that are syntactically correct according to the
	generic CSS grammar and the individual grammars of each feature in
	this module, and meet all other conformance requirements of style sheets
	as described in this module. </p>
  <h3 class="heading settled" id="conform-responsible"><span class="content"> Requirements for Responsible Implementation of CSS</span><a class="self-link" href="#conform-responsible"></a></h3>
  <p>The following sections define several conformance requirements
		for implementing CSS responsibly,
		in a way that promotes interoperability in the present and future. </p>
  <h4 class="heading settled" id="conform-partial"><span class="content"> Partial Implementations</span><a class="self-link" href="#conform-partial"></a></h4>
  <p>So that authors can exploit the forward-compatible parsing rules to assign fallback values, <strong>CSS renderers <em>must</em> treat as invalid
		(and <a href="http://www.w3.org/TR/CSS2/conform.html#ignore">ignore as appropriate</a>)
		any at-rules, properties, property values, keywords, and other syntactic constructs
		for which they have no usable level of support</strong>.
		In particular, user agents <em>must not</em> selectively ignore
		unsupported property values and honor supported values in a single multi-value property declaration:
		if any value is considered invalid (as unsupported values must be),
		CSS requires that the entire declaration be ignored. </p>
  <h4 class="heading settled" id="conform-future-proofing"><span class="content"> Implementations of Unstable and Proprietary Features</span><a class="self-link" href="#conform-future-proofing"></a></h4>
  <p>To avoid clashes with future stable CSS features,
		the CSSWG recommends <a href="http://www.w3.org/TR/CSS/#future-proofing">following best practices</a> for the implementation of <a href="http://www.w3.org/TR/CSS/#unstable">unstable</a> features and <a href="http://www.w3.org/TR/CSS/#proprietary-extension">proprietary extensions</a> to CSS. </p>
  <h4 class="heading settled" id="conform-testing"><span class="content"> Implementations of CR-level Features</span><a class="self-link" href="#conform-testing"></a></h4>
  <p>Once a specification reaches the Candidate Recommendation stage,
		implementers should release an <a data-link-type="dfn" href="http://www.w3.org/TR/CSS/#vendor-prefix">unprefixed</a> implementation
		of any CR-level feature they can demonstrate
		to be correctly implemented according to spec,
		and should avoid exposing a prefixed variant of that feature. </p>
  <p>To establish and maintain the interoperability of CSS across
		implementations, the CSS Working Group requests that non-experimental
		CSS renderers submit an implementation report (and, if necessary, the
		testcases used for that implementation report) to the W3C before
		releasing an unprefixed implementation of any CSS features. Testcases
		submitted to W3C are subject to review and correction by the CSS
		Working Group. </p>
  <p>
   Further information on submitting testcases and implementation reports
		can be found from on the CSS Working Group’s website at <a href="http://www.w3.org/Style/CSS/Test/">http://www.w3.org/Style/CSS/Test/</a>.
		Questions should be directed to the <a href="http://lists.w3.org/Archives/Public/public-css-testsuite">public-css-testsuite@w3.org</a> mailing list. 
<script src="https://www.w3.org/scripts/TR/2016/fixup.js"></script>
  </p>
  <h2 class="no-num no-ref heading settled" id="index"><span class="content">Index</span><a class="self-link" href="#index"></a></h2>
  <h3 class="no-num no-ref heading settled" id="index-defined-here"><span class="content">Terms defined by this specification</span><a class="self-link" href="#index-defined-here"></a></h3>
  <ul class="index">
   <li><a href="#dom-resizeobserver-activetargets">activeTargets</a><span>, in §3.2.2</span>
   <li><a href="#dom-resizeobserversize-blocksize">blockSize</a><span>, in §2.3</span>
   <li><a href="#dom-resizeobserverboxoptions-border-box">"border-box"</a><span>, in §2.1</span>
   <li><a href="#dom-resizeobserverentry-borderboxsize">borderBoxSize</a><span>, in §2.3</span>
   <li><a href="#dom-resizeobserveroptions-box">box</a><span>, in §2.1</span>
   <li><a href="#broadcast-active-observations">broadcast active observations</a><span>, in §3.4.5</span>
   <li><a href="#calculate-box-size①">calculate box size</a><span>, in §3.4.8</span>
   <li><a href="#calculate-depth-for-node">calculate depth for node</a><span>, in §3.4.7</span>
   <li><a href="#dom-resizeobserver-callback">callback</a><span>, in §3.2.2</span>
   <li><a href="#dom-resizeobserverboxoptions-content-box">"content-box"</a><span>, in §2.1</span>
   <li><a href="#dom-resizeobserverentry-contentboxsize">contentBoxSize</a><span>, in §2.3</span>
   <li><a href="#content-rect">content rect</a><span>, in §3.3.1</span>
   <li><a href="#dom-resizeobserverentry-contentrect">contentRect</a><span>, in §2.3</span>
   <li><a href="#create-and-populate-a-resizeobserverentry">create and populate a ResizeObserverEntry</a><span>, in §3.4.4</span>
   <li><a href="#deliver-resize-loop-error-notification">deliver resize loop error notification</a><span>, in §3.4.6</span>
   <li><a href="#dom-resizeobserverboxoptions-device-pixel-content-box">"device-pixel-content-box"</a><span>, in §2.1</span>
   <li><a href="#dom-resizeobserverentry-devicepixelcontentboxsize">devicePixelContentBoxSize</a><span>, in §2.3</span>
   <li><a href="#dom-resizeobserver-disconnect">disconnect()</a><span>, in §2.1</span>
   <li><a href="#gather-active-observations-at-depth">gather active observations at depth</a><span>, in §3.4.1</span>
   <li><a href="#has-active-observations">has active observations</a><span>, in §3.4.2</span>
   <li><a href="#has-skipped-observations">has skipped observations</a><span>, in §3.4.3</span>
   <li><a href="#dom-resizeobserversize-inlinesize">inlineSize</a><span>, in §2.3</span>
   <li><a href="#dom-resizeobservation-isactive">isActive()</a><span>, in §3.1</span>
   <li><a href="#dom-resizeobservation-lastreportedsizes">lastReportedSizes</a><span>, in §3.1</span>
   <li><a href="#dom-resizeobserver-observationtargets">observationTargets</a><span>, in §3.2.2</span>
   <li><a href="#dom-resizeobservation-observedbox">observedBox</a><span>, in §3.1</span>
   <li><a href="#dom-resizeobserver-observe">observe(target)</a><span>, in §2.1</span>
   <li><a href="#dom-resizeobserver-observe">observe(target, options)</a><span>, in §2.1</span>
   <li><a href="#resizeobservation">ResizeObservation</a><span>, in §3.1</span>
   <li><a href="#dom-resizeobservation-resizeobservation">ResizeObservation(target)</a><span>, in §3.1</span>
   <li><a href="#dom-resizeobservation-resizeobservation-target-options">ResizeObservation(target, options)</a><span>, in §3.1</span>
   <li><a href="#resizeobserver">ResizeObserver</a><span>, in §2.1</span>
   <li><a href="#enumdef-resizeobserverboxoptions">ResizeObserverBoxOptions</a><span>, in §2.1</span>
   <li><a href="#dom-resizeobserver-resizeobserver">ResizeObserver(callback)</a><span>, in §2.1</span>
   <li><a href="#callbackdef-resizeobservercallback">ResizeObserverCallback</a><span>, in §2.2</span>
   <li><a href="#resizeobserverentry">ResizeObserverEntry</a><span>, in §2.3</span>
   <li><a href="#dictdef-resizeobserveroptions">ResizeObserverOptions</a><span>, in §2.1</span>
   <li><a href="#dom-document-resizeobservers">resizeObservers</a><span>, in §3.2.1</span>
   <li><a href="#resizeobserversize">ResizeObserverSize</a><span>, in §2.3</span>
   <li><a href="#dom-resizeobserver-skippedtargets">skippedTargets</a><span>, in §3.2.2</span>
   <li>
    target
    <ul>
     <li><a href="#dom-resizeobservation-target">attribute for ResizeObservation</a><span>, in §3.1</span>
     <li><a href="#dom-resizeobserverentry-target">attribute for ResizeObserverEntry</a><span>, in §2.3</span>
    </ul>
   <li><a href="#dom-resizeobserver-unobserve">unobserve(target)</a><span>, in §2.1</span>
  </ul>
  <aside class="dfn-panel" data-for="term-for-border-area">
   <a href="https://drafts.csswg.org/css-box-3/#border-area">https://drafts.csswg.org/css-box-3/#border-area</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-border-area">3.4.8. Calculate box size, given target and observed box</a> <a href="#ref-for-border-area①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-border-box">
   <a href="https://drafts.csswg.org/css-box-3/#border-box">https://drafts.csswg.org/css-box-3/#border-box</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-border-box">2.3. ResizeObserverEntry</a> <a href="#ref-for-border-box①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-eventdef-window-resize">
   <a href="https://drafts.csswg.org/cssom-view-1/#eventdef-window-resize">https://drafts.csswg.org/cssom-view-1/#eventdef-window-resize</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-eventdef-window-resize">1. Introduction</a> <a href="#ref-for-eventdef-window-resize①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-document">
   <a href="https://dom.spec.whatwg.org/#document">https://dom.spec.whatwg.org/#document</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-document">2.1. ResizeObserver interface</a>
    <li><a href="#ref-for-document①">3.4.2. Has active observations</a>
    <li><a href="#ref-for-document②">3.4.3. Has skipped observations</a>
    <li><a href="#ref-for-document③">3.6.1.  HTML Processing Model: Event Loop</a> <a href="#ref-for-document④">(2)</a> <a href="#ref-for-document⑤">(3)</a> <a href="#ref-for-document⑥">(4)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-element">
   <a href="https://dom.spec.whatwg.org/#element">https://dom.spec.whatwg.org/#element</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-element">1. Introduction</a> <a href="#ref-for-element①">(2)</a> <a href="#ref-for-element②">(3)</a> <a href="#ref-for-element③">(4)</a> <a href="#ref-for-element④">(5)</a>
    <li><a href="#ref-for-element⑤">2.1. ResizeObserver interface</a> <a href="#ref-for-element⑥">(2)</a> <a href="#ref-for-element⑦">(3)</a>
    <li><a href="#ref-for-element⑧">2.3. ResizeObserverEntry</a> <a href="#ref-for-element⑨">(2)</a> <a href="#ref-for-element①⓪">(3)</a> <a href="#ref-for-element①①">(4)</a> <a href="#ref-for-element①②">(5)</a> <a href="#ref-for-element①③">(6)</a> <a href="#ref-for-element①④">(7)</a>
    <li><a href="#ref-for-element①⑤">3.1. ResizeObservation example struct</a> <a href="#ref-for-element①⑥">(2)</a> <a href="#ref-for-element①⑦">(3)</a> <a href="#ref-for-element①⑧">(4)</a> <a href="#ref-for-element①⑨">(5)</a>
    <li><a href="#ref-for-element②⓪">3.3.1. content rect</a>
    <li><a href="#ref-for-element②①">3.4.8. Calculate box size, given target and observed box</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-mutationobserver">
   <a href="https://dom.spec.whatwg.org/#mutationobserver">https://dom.spec.whatwg.org/#mutationobserver</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-mutationobserver">2.1. ResizeObserver interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-concept-document">
   <a href="https://dom.spec.whatwg.org/#concept-document">https://dom.spec.whatwg.org/#concept-document</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-concept-document">3.2.1. Document</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-domrectreadonly">
   <a href="https://drafts.fxtf.org/geometry-1/#domrectreadonly">https://drafts.fxtf.org/geometry-1/#domrectreadonly</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-domrectreadonly">2.3. ResizeObserverEntry</a> <a href="#ref-for-domrectreadonly①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-errorevent">
   <a href="https://html.spec.whatwg.org/multipage/webappapis.html#errorevent">https://html.spec.whatwg.org/multipage/webappapis.html#errorevent</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-errorevent">3.4.6. Deliver Resize Loop Error</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-InterfaceSVGGraphicsElement">
   <a href="https://svgwg.org/svg2-draft/types.html#InterfaceSVGGraphicsElement">https://svgwg.org/svg2-draft/types.html#InterfaceSVGGraphicsElement</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-InterfaceSVGGraphicsElement">3.4.8. Calculate box size, given target and observed box</a> <a href="#ref-for-InterfaceSVGGraphicsElement①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-Exposed">
   <a href="https://heycam.github.io/webidl/#Exposed">https://heycam.github.io/webidl/#Exposed</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-Exposed">2.1. ResizeObserver interface</a>
    <li><a href="#ref-for-Exposed①">2.3. ResizeObserverEntry</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-idl-unrestricted-double">
   <a href="https://heycam.github.io/webidl/#idl-unrestricted-double">https://heycam.github.io/webidl/#idl-unrestricted-double</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-idl-unrestricted-double">2.3. ResizeObserverEntry</a> <a href="#ref-for-idl-unrestricted-double①">(2)</a>
   </ul>
  </aside>
  <h3 class="no-num no-ref heading settled" id="index-defined-elsewhere"><span class="content">Terms defined by reference</span><a class="self-link" href="#index-defined-elsewhere"></a></h3>
  <ul class="index">
   <li>
    <a data-link-type="biblio">[css-box-3]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-border-area" style="color:initial">border area</span>
     <li><span class="dfn-paneled" id="term-for-border-box" style="color:initial">border box</span>
    </ul>
   <li>
    <a data-link-type="biblio">[cssom-view-1]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-eventdef-window-resize" style="color:initial">resize</span>
    </ul>
   <li>
    <a data-link-type="biblio">[DOM]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-document" style="color:initial">Document</span>
     <li><span class="dfn-paneled" id="term-for-element" style="color:initial">Element</span>
     <li><span class="dfn-paneled" id="term-for-mutationobserver" style="color:initial">MutationObserver</span>
     <li><span class="dfn-paneled" id="term-for-concept-document" style="color:initial">document</span>
    </ul>
   <li>
    <a data-link-type="biblio">[geometry-1]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-domrectreadonly" style="color:initial">DOMRectReadOnly</span>
    </ul>
   <li>
    <a data-link-type="biblio">[HTML]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-errorevent" style="color:initial">ErrorEvent</span>
    </ul>
   <li>
    <a data-link-type="biblio">[SVG2]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-InterfaceSVGGraphicsElement" style="color:initial">SVGGraphicsElement</span>
    </ul>
   <li>
    <a data-link-type="biblio">[WebIDL]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-Exposed" style="color:initial">Exposed</span>
     <li><span class="dfn-paneled" id="term-for-idl-unrestricted-double" style="color:initial">unrestricted double</span>
    </ul>
  </ul>
  <h2 class="no-num no-ref heading settled" id="references"><span class="content">References</span><a class="self-link" href="#references"></a></h2>
  <h3 class="no-num no-ref heading settled" id="normative"><span class="content">Normative References</span><a class="self-link" href="#normative"></a></h3>
  <dl>
   <dt id="biblio-css-box-3">[CSS-BOX-3]
   <dd>Elika Etemad. <a href="https://www.w3.org/TR/css-box-3/">CSS Box Model Module Level 3</a>. 18 December 2018. WD. URL: <a href="https://www.w3.org/TR/css-box-3/">https://www.w3.org/TR/css-box-3/</a>
   <dt id="biblio-cssom-view-1">[CSSOM-VIEW-1]
   <dd>Simon Pieters. <a href="https://www.w3.org/TR/cssom-view-1/">CSSOM View Module</a>. 17 March 2016. WD. URL: <a href="https://www.w3.org/TR/cssom-view-1/">https://www.w3.org/TR/cssom-view-1/</a>
   <dt id="biblio-dom">[DOM]
   <dd>Anne van Kesteren. <a href="https://dom.spec.whatwg.org/">DOM Standard</a>. Living Standard. URL: <a href="https://dom.spec.whatwg.org/">https://dom.spec.whatwg.org/</a>
   <dt id="biblio-geometry-1">[GEOMETRY-1]
   <dd>Simon Pieters; Chris Harrelson. <a href="https://www.w3.org/TR/geometry-1/">Geometry Interfaces Module Level 1</a>. 4 December 2018. CR. URL: <a href="https://www.w3.org/TR/geometry-1/">https://www.w3.org/TR/geometry-1/</a>
   <dt id="biblio-html">[HTML]
   <dd>Anne van Kesteren; et al. <a href="https://html.spec.whatwg.org/multipage/">HTML Standard</a>. Living Standard. URL: <a href="https://html.spec.whatwg.org/multipage/">https://html.spec.whatwg.org/multipage/</a>
   <dt id="biblio-rfc2119">[RFC2119]
   <dd>S. Bradner. <a href="https://tools.ietf.org/html/rfc2119">Key words for use in RFCs to Indicate Requirement Levels</a>. March 1997. Best Current Practice. URL: <a href="https://tools.ietf.org/html/rfc2119">https://tools.ietf.org/html/rfc2119</a>
   <dt id="biblio-svg2">[SVG2]
   <dd>Amelia Bellamy-Royds; et al. <a href="https://www.w3.org/TR/SVG2/">Scalable Vector Graphics (SVG) 2</a>. 4 October 2018. CR. URL: <a href="https://www.w3.org/TR/SVG2/">https://www.w3.org/TR/SVG2/</a>
   <dt id="biblio-webidl">[WebIDL]
   <dd>Boris Zbarsky. <a href="https://heycam.github.io/webidl/">Web IDL</a>. 15 December 2016. ED. URL: <a href="https://heycam.github.io/webidl/">https://heycam.github.io/webidl/</a>
  </dl>
  <h2 class="no-num no-ref heading settled" id="idl-index"><span class="content">IDL Index</span><a class="self-link" href="#idl-index"></a></h2>
<pre class="idl highlight def"><c- b>enum</c-> <a href="#enumdef-resizeobserverboxoptions"><code><c- g>ResizeObserverBoxOptions</c-></code></a> {
    <a href="#dom-resizeobserverboxoptions-border-box"><code><c- s>"border-box"</c-></code></a>, <a href="#dom-resizeobserverboxoptions-content-box"><code><c- s>"content-box"</c-></code></a>, <a href="#dom-resizeobserverboxoptions-device-pixel-content-box"><code><c- s>"device-pixel-content-box"</c-></code></a>
};

<c- b>dictionary</c-> <a href="#dictdef-resizeobserveroptions"><code><c- g>ResizeObserverOptions</c-></code></a> {
    <a class="n" data-link-type="idl-name" href="#enumdef-resizeobserverboxoptions" id="ref-for-enumdef-resizeobserverboxoptions④"><c- n>ResizeObserverBoxOptions</c-></a> <a data-default="&quot;content-box&quot;" data-type="ResizeObserverBoxOptions " href="#dom-resizeobserveroptions-box"><code><c- g>box</c-></code></a> = "content-box";
};

[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed②"><c- g>Exposed</c-></a>=(<c- n>Window</c->),
 <a class="idl-code" data-link-type="constructor" href="#dom-resizeobserver-resizeobserver" id="ref-for-dom-resizeobserver-resizeobserver①"><c- g>Constructor</c-></a>(<a class="n" data-link-type="idl-name" href="#callbackdef-resizeobservercallback" id="ref-for-callbackdef-resizeobservercallback⑤"><c- n>ResizeObserverCallback</c-></a> <a href="#dom-resizeobserver-resizeobserver-callback-callback"><code><c- g>callback</c-></code></a>)]
<c- b>interface</c-> <a href="#resizeobserver"><code><c- g>ResizeObserver</c-></code></a> {
    <c- b>void</c-> <a class="idl-code" data-link-type="method" href="#dom-resizeobserver-observe" id="ref-for-dom-resizeobserver-observe①"><c- g>observe</c-></a>(<a class="n" data-link-type="idl-name" href="https://dom.spec.whatwg.org/#element" id="ref-for-element⑥①"><c- n>Element</c-></a> <a href="#dom-resizeobserver-observe-target-options-target"><code><c- g>target</c-></code></a>, <c- b>optional</c-> <a class="n" data-link-type="idl-name" href="#dictdef-resizeobserveroptions" id="ref-for-dictdef-resizeobserveroptions①"><c- n>ResizeObserverOptions</c-></a> <a href="#dom-resizeobserver-observe-target-options-options"><code><c- g>options</c-></code></a>);
    <c- b>void</c-> <a class="idl-code" data-link-type="method" href="#dom-resizeobserver-unobserve" id="ref-for-dom-resizeobserver-unobserve①"><c- g>unobserve</c-></a>(<a class="n" data-link-type="idl-name" href="https://dom.spec.whatwg.org/#element" id="ref-for-element⑦①"><c- n>Element</c-></a> <a href="#dom-resizeobserver-unobserve-target-target"><code><c- g>target</c-></code></a>);
    <c- b>void</c-> <a class="idl-code" data-link-type="method" href="#dom-resizeobserver-disconnect" id="ref-for-dom-resizeobserver-disconnect①"><c- g>disconnect</c-></a>();
};

<c- b>callback</c-> <a href="#callbackdef-resizeobservercallback"><code><c- g>ResizeObserverCallback</c-></code></a> = <c- b>void</c-> (<c- b>sequence</c->&lt;<a class="n" data-link-type="idl-name" href="#resizeobserverentry" id="ref-for-resizeobserverentry④"><c- n>ResizeObserverEntry</c-></a>> <a href="#dom-resizeobservercallback-entries"><code><c- g>entries</c-></code></a>, <a class="n" data-link-type="idl-name" href="#resizeobserver" id="ref-for-resizeobserver①②"><c- n>ResizeObserver</c-></a> <a href="#dom-resizeobservercallback-observer"><code><c- g>observer</c-></code></a>);

[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed①①"><c- g>Exposed</c-></a>=<c- n>Window</c->]
<c- b>interface</c-> <a href="#resizeobserverentry"><code><c- g>ResizeObserverEntry</c-></code></a> {
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://dom.spec.whatwg.org/#element" id="ref-for-element⑧①"><c- n>Element</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="Element" href="#dom-resizeobserverentry-target" id="ref-for-dom-resizeobserverentry-target②"><c- g>target</c-></a>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://drafts.fxtf.org/geometry-1/#domrectreadonly" id="ref-for-domrectreadonly②"><c- n>DOMRectReadOnly</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="DOMRectReadOnly" href="#dom-resizeobserverentry-contentrect" id="ref-for-dom-resizeobserverentry-contentrect②"><c- g>contentRect</c-></a>;
    <c- b>readonly</c-> <c- b>attribute</c-> <c- b>sequence</c->&lt;<a class="n" data-link-type="idl-name" href="#resizeobserversize" id="ref-for-resizeobserversize⑧"><c- n>ResizeObserverSize</c-></a>> <a class="idl-code" data-link-type="attribute" data-readonly data-type="sequence<ResizeObserverSize>" href="#dom-resizeobserverentry-borderboxsize" id="ref-for-dom-resizeobserverentry-borderboxsize③"><c- g>borderBoxSize</c-></a>;
    <c- b>readonly</c-> <c- b>attribute</c-> <c- b>sequence</c->&lt;<a class="n" data-link-type="idl-name" href="#resizeobserversize" id="ref-for-resizeobserversize①①"><c- n>ResizeObserverSize</c-></a>> <a class="idl-code" data-link-type="attribute" data-readonly data-type="sequence<ResizeObserverSize>" href="#dom-resizeobserverentry-contentboxsize" id="ref-for-dom-resizeobserverentry-contentboxsize④"><c- g>contentBoxSize</c-></a>;
    <c- b>readonly</c-> <c- b>attribute</c-> <c- b>sequence</c->&lt;<a class="n" data-link-type="idl-name" href="#resizeobserversize" id="ref-for-resizeobserversize②①"><c- n>ResizeObserverSize</c-></a>> <a class="idl-code" data-link-type="attribute" data-readonly data-type="sequence<ResizeObserverSize>" href="#dom-resizeobserverentry-devicepixelcontentboxsize" id="ref-for-dom-resizeobserverentry-devicepixelcontentboxsize③"><c- g>devicePixelContentBoxSize</c-></a>;
};

<c- b>interface</c-> <a href="#resizeobserversize"><code><c- g>ResizeObserverSize</c-></code></a> {
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double②"><c- b>unrestricted</c-> <c- b>double</c-></a> <a data-readonly data-type="unrestricted double" href="#dom-resizeobserversize-inlinesize"><code><c- g>inlineSize</c-></code></a>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double①①"><c- b>unrestricted</c-> <c- b>double</c-></a> <a data-readonly data-type="unrestricted double" href="#dom-resizeobserversize-blocksize"><code><c- g>blockSize</c-></code></a>;
};

[<a href="#dom-resizeobservation-resizeobservation"><code><c- g>Constructor</c-></code></a>(<a class="n" data-link-type="idl-name" href="https://dom.spec.whatwg.org/#element" id="ref-for-element①⑥①"><c- n>Element</c-></a> <a href="#dom-resizeobservation-resizeobservation-target-target"><code><c- g>target</c-></code></a>)
]
<c- b>interface</c-> <a href="#resizeobservation"><code><c- g>ResizeObservation</c-></code></a> {
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://dom.spec.whatwg.org/#element" id="ref-for-element①⑦①"><c- n>Element</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="Element" href="#dom-resizeobservation-target" id="ref-for-dom-resizeobservation-target⑤"><c- g>target</c-></a>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="#enumdef-resizeobserverboxoptions" id="ref-for-enumdef-resizeobserverboxoptions①①"><c- n>ResizeObserverBoxOptions</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="ResizeObserverBoxOptions" href="#dom-resizeobservation-observedbox" id="ref-for-dom-resizeobservation-observedbox⑤"><c- g>observedBox</c-></a>;
    <c- b>readonly</c-> <c- b>attribute</c-> <c- b>sequence</c->&lt;<a class="n" data-link-type="idl-name" href="#resizeobserversize" id="ref-for-resizeobserversize⑥①"><c- n>ResizeObserverSize</c-></a>> <a class="idl-code" data-link-type="attribute" data-readonly data-type="sequence<ResizeObserverSize>" href="#dom-resizeobservation-lastreportedsizes" id="ref-for-dom-resizeobservation-lastreportedsizes④"><c- g>lastReportedSizes</c-></a>;
};

</pre>
  <aside class="dfn-panel" data-for="enumdef-resizeobserverboxoptions">
   <b><a href="#enumdef-resizeobserverboxoptions">#enumdef-resizeobserverboxoptions</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-enumdef-resizeobserverboxoptions">2.1. ResizeObserver interface</a>
    <li><a href="#ref-for-enumdef-resizeobserverboxoptions①">3.1. ResizeObservation example struct</a> <a href="#ref-for-enumdef-resizeobserverboxoptions②">(2)</a>
    <li><a href="#ref-for-enumdef-resizeobserverboxoptions③">3.4.8. Calculate box size, given target and observed box</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-resizeobserverboxoptions-border-box">
   <b><a href="#dom-resizeobserverboxoptions-border-box">#dom-resizeobserverboxoptions-border-box</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-resizeobserverboxoptions-border-box">2.1. ResizeObserver interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-resizeobserverboxoptions-content-box">
   <b><a href="#dom-resizeobserverboxoptions-content-box">#dom-resizeobserverboxoptions-content-box</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-resizeobserverboxoptions-content-box">2.1. ResizeObserver interface</a> <a href="#ref-for-dom-resizeobserverboxoptions-content-box①">(2)</a> <a href="#ref-for-dom-resizeobserverboxoptions-content-box②">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-resizeobserverboxoptions-device-pixel-content-box">
   <b><a href="#dom-resizeobserverboxoptions-device-pixel-content-box">#dom-resizeobserverboxoptions-device-pixel-content-box</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-resizeobserverboxoptions-device-pixel-content-box">2.1. ResizeObserver interface</a> <a href="#ref-for-dom-resizeobserverboxoptions-device-pixel-content-box①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dictdef-resizeobserveroptions">
   <b><a href="#dictdef-resizeobserveroptions">#dictdef-resizeobserveroptions</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dictdef-resizeobserveroptions">2.1. ResizeObserver interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="resizeobserver">
   <b><a href="#resizeobserver">#resizeobserver</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-resizeobserver">2.1. ResizeObserver interface</a>
    <li><a href="#ref-for-resizeobserver①">2.2. ResizeObserverCallback</a> <a href="#ref-for-resizeobserver②">(2)</a>
    <li><a href="#ref-for-resizeobserver③">3.2.1. Document</a>
    <li><a href="#ref-for-resizeobserver④">3.2.2. ResizeObserver</a> <a href="#ref-for-resizeobserver⑤">(2)</a> <a href="#ref-for-resizeobserver⑥">(3)</a> <a href="#ref-for-resizeobserver⑦">(4)</a>
    <li><a href="#ref-for-resizeobserver⑧">3.5. ResizeObserver Lifetime</a>
    <li><a href="#ref-for-resizeobserver⑨">3.6.1.  HTML Processing Model: Event Loop</a> <a href="#ref-for-resizeobserver①⓪">(2)</a> <a href="#ref-for-resizeobserver①①">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-resizeobserver-resizeobserver">
   <b><a href="#dom-resizeobserver-resizeobserver">#dom-resizeobserver-resizeobserver</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-resizeobserver-resizeobserver">2.1. ResizeObserver interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-resizeobserver-observe">
   <b><a href="#dom-resizeobserver-observe">#dom-resizeobserver-observe</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-resizeobserver-observe">2.1. ResizeObserver interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-resizeobserver-unobserve">
   <b><a href="#dom-resizeobserver-unobserve">#dom-resizeobserver-unobserve</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-resizeobserver-unobserve">2.1. ResizeObserver interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-resizeobserver-disconnect">
   <b><a href="#dom-resizeobserver-disconnect">#dom-resizeobserver-disconnect</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-resizeobserver-disconnect">2.1. ResizeObserver interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="callbackdef-resizeobservercallback">
   <b><a href="#callbackdef-resizeobservercallback">#callbackdef-resizeobservercallback</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-callbackdef-resizeobservercallback">2.1. ResizeObserver interface</a>
    <li><a href="#ref-for-callbackdef-resizeobservercallback①">2.3. ResizeObserverEntry</a> <a href="#ref-for-callbackdef-resizeobservercallback②">(2)</a> <a href="#ref-for-callbackdef-resizeobservercallback③">(3)</a> <a href="#ref-for-callbackdef-resizeobservercallback④">(4)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="resizeobserverentry">
   <b><a href="#resizeobserverentry">#resizeobserverentry</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-resizeobserverentry">2.2. ResizeObserverCallback</a>
    <li><a href="#ref-for-resizeobserverentry①">3.4.4. 
Create and populate a ResizeObserverEntry </a>
    <li><a href="#ref-for-resizeobserverentry②">3.4.5. Broadcast active observations</a> <a href="#ref-for-resizeobserverentry③">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-resizeobserverentry-target">
   <b><a href="#dom-resizeobserverentry-target">#dom-resizeobserverentry-target</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-resizeobserverentry-target">2.3. ResizeObserverEntry</a>
    <li><a href="#ref-for-dom-resizeobserverentry-target①">3.4.4. 
Create and populate a ResizeObserverEntry </a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-resizeobserverentry-contentrect">
   <b><a href="#dom-resizeobserverentry-contentrect">#dom-resizeobserverentry-contentrect</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-resizeobserverentry-contentrect">2.3. ResizeObserverEntry</a>
    <li><a href="#ref-for-dom-resizeobserverentry-contentrect①">3.4.4. 
Create and populate a ResizeObserverEntry </a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-resizeobserverentry-borderboxsize">
   <b><a href="#dom-resizeobserverentry-borderboxsize">#dom-resizeobserverentry-borderboxsize</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-resizeobserverentry-borderboxsize">2.3. ResizeObserverEntry</a>
    <li><a href="#ref-for-dom-resizeobserverentry-borderboxsize①">3.4.4. 
Create and populate a ResizeObserverEntry </a>
    <li><a href="#ref-for-dom-resizeobserverentry-borderboxsize②">3.4.5. Broadcast active observations</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-resizeobserverentry-contentboxsize">
   <b><a href="#dom-resizeobserverentry-contentboxsize">#dom-resizeobserverentry-contentboxsize</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-resizeobserverentry-contentboxsize">2.3. ResizeObserverEntry</a>
    <li><a href="#ref-for-dom-resizeobserverentry-contentboxsize①">3.4.4. 
Create and populate a ResizeObserverEntry </a> <a href="#ref-for-dom-resizeobserverentry-contentboxsize②">(2)</a>
    <li><a href="#ref-for-dom-resizeobserverentry-contentboxsize③">3.4.5. Broadcast active observations</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-resizeobserverentry-devicepixelcontentboxsize">
   <b><a href="#dom-resizeobserverentry-devicepixelcontentboxsize">#dom-resizeobserverentry-devicepixelcontentboxsize</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-resizeobserverentry-devicepixelcontentboxsize">2.3. ResizeObserverEntry</a>
    <li><a href="#ref-for-dom-resizeobserverentry-devicepixelcontentboxsize①">3.4.4. 
Create and populate a ResizeObserverEntry </a>
    <li><a href="#ref-for-dom-resizeobserverentry-devicepixelcontentboxsize②">3.4.5. Broadcast active observations</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="resizeobserversize">
   <b><a href="#resizeobserversize">#resizeobserversize</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-resizeobserversize">2.3. ResizeObserverEntry</a> <a href="#ref-for-resizeobserversize①">(2)</a> <a href="#ref-for-resizeobserversize②">(3)</a> <a href="#ref-for-resizeobserversize③">(4)</a> <a href="#ref-for-resizeobserversize④">(5)</a> <a href="#ref-for-resizeobserversize⑤">(6)</a>
    <li><a href="#ref-for-resizeobserversize⑥">3.1. ResizeObservation example struct</a> <a href="#ref-for-resizeobserversize⑦">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="resizeobservation">
   <b><a href="#resizeobservation">#resizeobservation</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-resizeobservation">2.1. ResizeObserver interface</a> <a href="#ref-for-resizeobservation①">(2)</a>
    <li><a href="#ref-for-resizeobservation②">3.1. ResizeObservation example struct</a>
    <li><a href="#ref-for-resizeobservation③">3.2.2. ResizeObserver</a> <a href="#ref-for-resizeobservation④">(2)</a> <a href="#ref-for-resizeobservation⑤">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-resizeobservation-target">
   <b><a href="#dom-resizeobservation-target">#dom-resizeobservation-target</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-resizeobservation-target">3.1. ResizeObservation example struct</a> <a href="#ref-for-dom-resizeobservation-target①">(2)</a>
    <li><a href="#ref-for-dom-resizeobservation-target②">3.4.1. Gather active observations at depth</a>
    <li><a href="#ref-for-dom-resizeobservation-target③">3.4.5. Broadcast active observations</a> <a href="#ref-for-dom-resizeobservation-target④">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-resizeobservation-observedbox">
   <b><a href="#dom-resizeobservation-observedbox">#dom-resizeobservation-observedbox</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-resizeobservation-observedbox">3.1. ResizeObservation example struct</a> <a href="#ref-for-dom-resizeobservation-observedbox①">(2)</a>
    <li><a href="#ref-for-dom-resizeobservation-observedbox②">3.4.5. Broadcast active observations</a> <a href="#ref-for-dom-resizeobservation-observedbox③">(2)</a> <a href="#ref-for-dom-resizeobservation-observedbox④">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-resizeobservation-lastreportedsizes">
   <b><a href="#dom-resizeobservation-lastreportedsizes">#dom-resizeobservation-lastreportedsizes</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-resizeobservation-lastreportedsizes">3.1. ResizeObservation example struct</a> <a href="#ref-for-dom-resizeobservation-lastreportedsizes①">(2)</a> <a href="#ref-for-dom-resizeobservation-lastreportedsizes②">(3)</a>
    <li><a href="#ref-for-dom-resizeobservation-lastreportedsizes③">3.4.5. Broadcast active observations</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-resizeobservation-isactive">
   <b><a href="#dom-resizeobservation-isactive">#dom-resizeobservation-isactive</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-resizeobservation-isactive">3.4.1. Gather active observations at depth</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-document-resizeobservers">
   <b><a href="#dom-document-resizeobservers">#dom-document-resizeobservers</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-document-resizeobservers">3.4.1. Gather active observations at depth</a>
    <li><a href="#ref-for-dom-document-resizeobservers①">3.4.2. Has active observations</a>
    <li><a href="#ref-for-dom-document-resizeobservers②">3.4.3. Has skipped observations</a>
    <li><a href="#ref-for-dom-document-resizeobservers③">3.4.5. Broadcast active observations</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-resizeobserver-callback">
   <b><a href="#dom-resizeobserver-callback">#dom-resizeobserver-callback</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-resizeobserver-callback">3.4.5. Broadcast active observations</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-resizeobserver-observationtargets">
   <b><a href="#dom-resizeobserver-observationtargets">#dom-resizeobserver-observationtargets</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-resizeobserver-observationtargets">2.1. ResizeObserver interface</a> <a href="#ref-for-dom-resizeobserver-observationtargets①">(2)</a> <a href="#ref-for-dom-resizeobserver-observationtargets②">(3)</a> <a href="#ref-for-dom-resizeobserver-observationtargets③">(4)</a>
    <li><a href="#ref-for-dom-resizeobserver-observationtargets④">3.4.1. Gather active observations at depth</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-resizeobserver-activetargets">
   <b><a href="#dom-resizeobserver-activetargets">#dom-resizeobserver-activetargets</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-resizeobserver-activetargets">2.1. ResizeObserver interface</a>
    <li><a href="#ref-for-dom-resizeobserver-activetargets①">3.4.1. Gather active observations at depth</a> <a href="#ref-for-dom-resizeobserver-activetargets②">(2)</a>
    <li><a href="#ref-for-dom-resizeobserver-activetargets③">3.4.2. Has active observations</a>
    <li><a href="#ref-for-dom-resizeobserver-activetargets④">3.4.5. Broadcast active observations</a> <a href="#ref-for-dom-resizeobserver-activetargets⑤">(2)</a> <a href="#ref-for-dom-resizeobserver-activetargets⑥">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-resizeobserver-skippedtargets">
   <b><a href="#dom-resizeobserver-skippedtargets">#dom-resizeobserver-skippedtargets</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-resizeobserver-skippedtargets">3.4.1. Gather active observations at depth</a> <a href="#ref-for-dom-resizeobserver-skippedtargets①">(2)</a>
    <li><a href="#ref-for-dom-resizeobserver-skippedtargets②">3.4.3. Has skipped observations</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="content-rect">
   <b><a href="#content-rect">#content-rect</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-content-rect">2.3. ResizeObserverEntry</a> <a href="#ref-for-content-rect①">(2)</a> <a href="#ref-for-content-rect②">(3)</a> <a href="#ref-for-content-rect③">(4)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="gather-active-observations-at-depth">
   <b><a href="#gather-active-observations-at-depth">#gather-active-observations-at-depth</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-gather-active-observations-at-depth">3.6.1.  HTML Processing Model: Event Loop</a> <a href="#ref-for-gather-active-observations-at-depth①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="has-active-observations">
   <b><a href="#has-active-observations">#has-active-observations</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-has-active-observations">3.6.1.  HTML Processing Model: Event Loop</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="has-skipped-observations">
   <b><a href="#has-skipped-observations">#has-skipped-observations</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-has-skipped-observations">3.6.1.  HTML Processing Model: Event Loop</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="create-and-populate-a-resizeobserverentry">
   <b><a href="#create-and-populate-a-resizeobserverentry">#create-and-populate-a-resizeobserverentry</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-create-and-populate-a-resizeobserverentry">3.4.5. Broadcast active observations</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="broadcast-active-observations">
   <b><a href="#broadcast-active-observations">#broadcast-active-observations</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-broadcast-active-observations">2.2. ResizeObserverCallback</a>
    <li><a href="#ref-for-broadcast-active-observations①">3.6.1.  HTML Processing Model: Event Loop</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="deliver-resize-loop-error-notification">
   <b><a href="#deliver-resize-loop-error-notification">#deliver-resize-loop-error-notification</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-deliver-resize-loop-error-notification">3.6.1.  HTML Processing Model: Event Loop</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="calculate-depth-for-node">
   <b><a href="#calculate-depth-for-node">#calculate-depth-for-node</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-calculate-depth-for-node">3.4.1. Gather active observations at depth</a>
    <li><a href="#ref-for-calculate-depth-for-node①">3.4.5. Broadcast active observations</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="calculate-box-size①">
   <b><a href="#calculate-box-size①">#calculate-box-size①</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-calculate-box-size①">3.1. ResizeObservation example struct</a>
   </ul>
  </aside>
<script>/* script-dfn-panel */

document.body.addEventListener("click", function(e) {
    var queryAll = function(sel) { return [].slice.call(document.querySelectorAll(sel)); }
    // Find the dfn element or panel, if any, that was clicked on.
    var el = e.target;
    var target;
    var hitALink = false;
    while(el.parentElement) {
        if(el.tagName == "A") {
            // Clicking on a link in a <dfn> shouldn't summon the panel
            hitALink = true;
        }
        if(el.classList.contains("dfn-paneled")) {
            target = "dfn";
            break;
        }
        if(el.classList.contains("dfn-panel")) {
            target = "dfn-panel";
            break;
        }
        el = el.parentElement;
    }
    if(target != "dfn-panel") {
        // Turn off any currently "on" or "activated" panels.
        queryAll(".dfn-panel.on, .dfn-panel.activated").forEach(function(el){
            el.classList.remove("on");
            el.classList.remove("activated");
        });
    }
    if(target == "dfn" && !hitALink) {
        // open the panel
        var dfnPanel = document.querySelector(".dfn-panel[data-for='" + el.id + "']");
        if(dfnPanel) {
            dfnPanel.classList.add("on");
            var rect = el.getBoundingClientRect();
            dfnPanel.style.left = window.scrollX + rect.right + 5 + "px";
            dfnPanel.style.top = window.scrollY + rect.top + "px";
            var panelRect = dfnPanel.getBoundingClientRect();
            var panelWidth = panelRect.right - panelRect.left;
            if(panelRect.right > document.body.scrollWidth && (rect.left - (panelWidth + 5)) > 0) {
                // Reposition, because the panel is overflowing
                dfnPanel.style.left = window.scrollX + rect.left - (panelWidth + 5) + "px";
            }
        } else {
            console.log("Couldn't find .dfn-panel[data-for='" + el.id + "']");
        }
    } else if(target == "dfn-panel") {
        // Switch it to "activated" state, which pins it.
        el.classList.add("activated");
        el.style.left = null;
        el.style.top = null;
    }

});
</script>